/* ==========================================================================
   BRAND TOKENS  —  the only file you edit to rebrand this theme
   --------------------------------------------------------------------------
   Every colour, surface and glow in the site resolves through these custom
   properties. Nothing downstream hardcodes a hex value.

   To brand a new site: change the values in :root. Leave the selectors and
   property names alone — style.css depends on the names, not the values.

   The three [data-theme] blocks below drive the nav toggle:
     (default)  dark purple
     reverse    light
     split      white page with a dark hero
   ========================================================================== */

:root {
  --bg-deep:     #241b34;
  --bg-primary:  #3b2c5d;
  --bg-card:     #47376b;
  --accent-1:    #f07e50;
  --accent-2:    #e63d23;
  --neutral-light: #f6fbfe;
  --neutral-mid:   #f1eef6;
  --neutral-dim:   #ddd4e7;
  --neutral-dark:  #333333;
  --border:        rgba(210, 203, 225, 0.2);
  --glow-accent:   rgba(198, 90, 47, 0.28);
  --surface-1: rgba(37,29,57,0.72);
  --surface-2: rgba(37,29,57,0.6);
  --surface-3: rgba(37,29,57,0.54);
  --surface-4: rgba(37,29,57,0.64);
  --surface-input: rgba(255,255,255,0.06);
  --surface-input-focus: rgba(255,255,255,0.1);
  --nav-bg: rgba(36, 27, 52, 0.9);
  --panel-header-bg: rgba(37,29,57,0.86);
  --grid-line: rgba(210,203,225,0.06);
  --vtag-bg: rgba(255,255,255,0.05);
  --hero-glow-1: rgba(71,55,107,0.5);
  --hero-glow-2: rgba(198,90,47,0.09);
  --spotlight-shade-1: rgba(36, 27, 52, 0.58);
  --spotlight-shade-2: rgba(36, 27, 52, 0.8);
  --logo-orange: #f07e50;
  --max-w: 1200px;
}

[data-theme="reverse"] {
  --bg-deep: #f3f8fb;
  --bg-primary: #e7e1ef;
  --bg-card: #d8d1e0;
  --neutral-light: #1a1524;
  --neutral-mid: #3a2e50;
  --neutral-dim: #57476a;
  --neutral-dark: #f3f8fb;
  --border: rgba(47, 35, 75, 0.18);
  --glow-accent: rgba(198, 90, 47, 0.2);
  --surface-1: rgba(255,255,255,0.78);
  --surface-2: rgba(255,255,255,0.72);
  --surface-3: rgba(255,255,255,0.68);
  --surface-4: rgba(255,255,255,0.75);
  --surface-input: rgba(47,35,75,0.05);
  --surface-input-focus: rgba(47,35,75,0.08);
  --nav-bg: rgba(243, 248, 251, 0.9);
  --panel-header-bg: rgba(216, 209, 224, 0.88);
  --grid-line: rgba(47,35,75,0.08);
  --vtag-bg: rgba(47,35,75,0.05);
  --hero-glow-1: rgba(47,35,75,0.14);
  --hero-glow-2: rgba(198,90,47,0.1);
  --spotlight-shade-1: rgba(243, 248, 251, 0.55);
  --spotlight-shade-2: rgba(243, 248, 251, 0.82);
}

[data-theme="split"] {
  --bg-deep: #f7f9fc;
  --bg-primary: #ffffff;
  --bg-card: #ffffff;
  --neutral-light: #16111f;
  --neutral-mid: #4b415d;
  --neutral-dim: #6e637f;
  --neutral-dark: #f7f9fc;
  --border: rgba(47, 35, 75, 0.12);
  --glow-accent: rgba(198, 90, 47, 0.14);
  --surface-1: rgba(255,255,255,0.92);
  --surface-2: rgba(255,255,255,0.84);
  --surface-3: rgba(255,255,255,0.8);
  --surface-4: rgba(255,255,255,0.88);
  --surface-input: rgba(47,35,75,0.05);
  --surface-input-focus: rgba(47,35,75,0.08);
  --nav-bg: rgba(247, 249, 252, 0.92);
  --panel-header-bg: rgba(229, 223, 236, 0.88);
  --grid-line: rgba(47,35,75,0.08);
  --vtag-bg: rgba(47,35,75,0.05);
  --hero-glow-1: rgba(47,35,75,0.12);
  --hero-glow-2: rgba(198, 90, 47, 0.08);
  --spotlight-shade-1: rgba(247, 249, 252, 0.55);
  --spotlight-shade-2: rgba(247, 249, 252, 0.82);
}

[data-theme="split"] :is(
body > section:first-of-type > .container > :first-child,
body > section:first-of-type > :first-child,
main > section:first-of-type > .container > :first-child,
main > section:first-of-type > :first-child
) {
  --bg-deep: #241b34;
  --bg-primary: #3b2c5d;
  --bg-card: #47376b;
  --neutral-light: #f6fbfe;
  --neutral-mid: #f1eef6;
  --neutral-dim: #ddd4e7;
  --neutral-dark: #333333;
  --border: rgba(210, 203, 225, 0.2);
  --surface-1: rgba(37,29,57,0.72);
  --surface-2: rgba(37,29,57,0.6);
  --surface-3: rgba(37,29,57,0.54);
  --surface-4: rgba(37,29,57,0.64);
  --surface-input: rgba(255,255,255,0.06);
  --surface-input-focus: rgba(255,255,255,0.1);
  --grid-line: rgba(210,203,225,0.06);
  --vtag-bg: rgba(255,255,255,0.05);
}

/* --------------------------------------------------------------------------
   STATUS & UTILITY TOKENS

   Added by the theme. The original stylesheet hardcodes these 23 times
   (success greens, error reds, warning ambers, pure white). They are declared
   here so new work references a token instead of a literal.

   Known gap: the existing declarations in style.css still use literals. They
   were left untouched deliberately — rewriting 23 live declarations carries
   more risk of subtle visual breakage than it removes. Migrating them is a
   safe follow-up once visual comparison has signed off.
   -------------------------------------------------------------------------- */
:root {
  --status-success:  #4ade80;
  --status-warning:  #fbbf24;
  --status-error:    #f87171;
  --status-success-bg: #0f2a1a;
  --status-error-bg:   #2a0f0f;
  --pure-white:      #ffffff;
}