/* Channel Plus / charcoal and gold.
 * Edit these variables to recolor the complete front-end interface.
 * The loader can also load both palettes: data-cp-color selects the active one.
 */
:root:not([data-cp-color]),
:root[data-cp-color="dark"] {
  --cp-color-scheme: dark;

  /* Sun/moon switch artwork; the two palettes intentionally share these colors. */
  --cp-toggle-day-sky: #2196f3;
  --cp-toggle-night-sky: #000000;
  --cp-toggle-sun: #ffff00;
  --cp-toggle-moon: #ffffff;
  --cp-toggle-crater: #808080;
  --cp-toggle-ray: #ffffff;
  --cp-toggle-cloud-light: #eeeeee;
  --cp-toggle-cloud-dark: #cccccc;
  --cp-toggle-star: #ffffff;

  /* Canvas, cards and controls. */
  --cp-page: #0b0b0a;
  --cp-pattern: #141411;
  --cp-surface-1: #10100f;
  --cp-surface-2: #171714;
  --cp-surface-3: #21211c;
  --cp-surface-hover: #2d2b23;
  --cp-field: #11110f;
  --cp-header: #11110f;
  --cp-footer: #0d0d0b;
  --cp-heading: #f8f5ed;
  --cp-text: #dedbd2;
  --cp-muted: #b1aea4;
  --cp-border: #39362e;
  --cp-border-strong: #827863;
  --cp-border-accent: #9e854d;

  /* Accent text is separate from filled buttons for readable contrast. */
  --cp-accent: #e8c875;
  --cp-accent-hover: #f5dda2;
  --cp-accent-fill: #dbb45b;
  --cp-accent-fill-light: #f0d48a;
  --cp-accent-fill-hover: #f0d48a;
  --cp-accent-soft: #292316;
  --cp-on-accent: #191409;
  --cp-focus: #f0d48a;
  --cp-shadow-color: #000000;
  --cp-swatch-fallback: #999999;

  /* Semantic states: errors remain red and success remains green. */
  --cp-danger: #ffb7ae;
  --cp-danger-fill: #a92c33;
  --cp-danger-soft: #361c1b;
  --cp-on-danger: #ffffff;
  --cp-success: #a8dfb7;
  --cp-success-soft: #172b1e;
  --cp-info: #b7d6f2;
  --cp-info-soft: #182731;
  --cp-warning: #f0d48a;
  --cp-warning-soft: #302719;

  /* Photography and video keep a controlled dark contrast layer in both palettes. */
  --cp-media-bg: #080808;
  --cp-on-media: #ffffff;
  --cp-on-media-muted: #dedbd3;
  --cp-media-accent: #e8c875;
  --cp-media-panel: #171714;
  --cp-media-panel-hover: #3c3017;
  --cp-media-border: #7f704c;
  --cp-media-overlay: rgb(0 0 0 / .58);
  --cp-modal-backdrop: rgb(0 0 0 / .88);
  --cp-expired-overlay: rgb(0 0 0 / .55);
  --cp-shadow-card: 0 12px 32px rgb(0 0 0 / .27);
  --cp-shadow-floating: 0 20px 55px rgb(0 0 0 / .45);

  /* Complete gradient recipes can be replaced here without touching component CSS. */
  --cp-gradient-accent: linear-gradient(120deg, var(--cp-accent-fill-light), var(--cp-accent-fill));
  --cp-gradient-panel: linear-gradient(135deg, var(--cp-surface-2), var(--cp-surface-1));
  --cp-gradient-card: linear-gradient(180deg, #11110f 8%, #1b1b16 48%, #292820 67%, #10100e 100%);
  --cp-gradient-gallery: radial-gradient(ellipse at center, #292820 0%, #141411 48%, #0b0b0a 85%);
  --cp-gradient-divider: linear-gradient(90deg, transparent, var(--cp-border-accent) 18%, var(--cp-border-accent) 82%, transparent);
  --cp-gradient-footer: linear-gradient(90deg, transparent, var(--cp-surface-2) 18%, var(--cp-footer) 82%, transparent);
  --cp-gradient-hero: linear-gradient(90deg, rgb(0 0 0 / .86), rgb(0 0 0 / .36) 50%, rgb(0 0 0 / .53)), linear-gradient(0deg, var(--cp-media-bg), transparent 40%);
  --cp-gradient-shop-hero: linear-gradient(180deg, rgb(0 0 0 / .05) 8%, rgb(0 0 0 / .25) 35%, rgb(0 0 0 / .82) 100%);
  --cp-gradient-event: linear-gradient(90deg, var(--cp-media-bg) 0%, rgb(8 8 8 / .95) 28%, rgb(8 8 8 / .45) 58%, rgb(8 8 8 / .05) 100%);
  --cp-gradient-event-rtl: linear-gradient(270deg, var(--cp-media-bg) 0%, rgb(8 8 8 / .95) 28%, rgb(8 8 8 / .45) 58%, rgb(8 8 8 / .05) 100%);
  --cp-gradient-photo-cta: linear-gradient(180deg, rgb(0 0 0 / .82), rgb(0 0 0 / .18) 65%, rgb(0 0 0 / .56));
  --cp-gradient-text: linear-gradient(135deg, var(--cp-accent-hover), var(--cp-accent));
  --cp-gradient-shine: linear-gradient(110deg, rgb(255 255 255 / .27), transparent 42%, rgb(0 0 0 / .4) 50%, rgb(255 255 255 / .2) 82%, rgb(0 0 0 / .33));
  --cp-pattern-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .015) 0 2px, transparent 2px 7px);
  --cp-site-logo-filter: none;
  --cp-map-icon-filter: invert(.9);
  --cp-brand-logo-filter: grayscale(1) brightness(0) invert(.94);
  --cp-brand-logo-hover-filter: brightness(0) saturate(100%) invert(83%) sepia(33%) saturate(566%) hue-rotate(349deg) brightness(99%) contrast(89%);
}