/* GetZelling — Color tokens
   Three chromatic colors, each with ONE job. Three neutral modes; a page lives in exactly one. */
:root {
  /* Brand core (logo triad) */
  --brand-navy: #0B2545;      /* Trust — headers, nav text, dark-mode surfaces */
  --brand-violet: #6C4FD0;    /* Innovation — tags & product-page accents ONLY */
  --brand-bronze: #8C6844;    /* Wealth — primary CTA buttons ONLY */

  /* Utility neutrals (Tesla-derived grays) */
  --carbon-dark: #171A20;     /* nav button text */
  --graphite: #393C41;        /* secondary button text */
  --pewter: #5C5E62;          /* text links */
  --silver-border: #D0D1D2;   /* secondary button inset border */
  --white: #FFFFFF;

  /* Mode: Stone & Paper (default marketing) */
  --stone-bg: #EFEAE2;
  --stone-surface: #FFFFFF;
  --stone-text: #201C16;
  --stone-text-body: #4A4436;   /* long-form body copy — one step lighter than --stone-text */
  --stone-text-muted: #6E6656;
  --stone-text-tertiary: #8A8577;   /* tier-3: axis labels, struck figures, fine print */
  --stone-border: #DDD5C7;

  /* Mode: Lavender Haze (product & tools) */
  --lavender-bg: #F3F1FA;
  --lavender-surface: #FFFFFF;
  --lavender-text: #1A1A1A;
  --lavender-text-body: #43424D;
  --lavender-text-muted: #6B6478;
  --lavender-text-tertiary: #8F8A9C;
  --lavender-border: #E2DCF2;

  /* Mode: Midnight (dark / premium) */
  --midnight-bg: #0B2545;
  --midnight-surface: #12305C;
  --midnight-text: #F4F1E8;
  --midnight-text-body: #CDD4E0;
  --midnight-text-muted: #AEB9D1;
  --midnight-text-tertiary: #8595B4;
  --midnight-border: rgba(255, 255, 255, 0.14);

  /* Overlay / scrim */
  --scrim: rgba(11, 37, 69, 0.65);
  --frost: rgba(255, 255, 255, 0.75);

  /* Violet tag / label — two environments (mirror images of each other).
     Light  = violet ink on a pale violet chip (Stone & Lavender surfaces).
     On-dark = pale violet ink on a translucent violet chip (Navy / Midnight surfaces). */
  --tag-violet-bg: #ECE8FB;
  --tag-violet-border: #D9CEF5;
  --tag-violet-text: #6C4FD0;
  --tag-violet-on-dark-bg: rgba(108, 79, 208, 0.22);
  --tag-violet-on-dark-border: rgba(108, 79, 208, 0.5);
  --tag-violet-on-dark-text: #C9B8FF;

  /* Semantic aliases — default to Stone & Paper */
  --bg: var(--stone-bg);
  --surface: var(--stone-surface);
  --text: var(--stone-text);
  --text-body: var(--stone-text-body);
  --text-muted: var(--stone-text-muted);
  --text-tertiary: var(--stone-text-tertiary);
  --border: var(--stone-border);
  --cta: var(--brand-bronze);
  --cta-text: var(--white);
  --accent: var(--brand-violet);
  --heading: var(--brand-navy);
  --tag-bg: var(--tag-violet-bg);
  --tag-border: var(--tag-violet-border);
  --tag-text: var(--tag-violet-text);
}

/* Mode scopes — apply exactly one per page */
.mode-stone {
  --bg: var(--stone-bg);
  --surface: var(--stone-surface);
  --text: var(--stone-text);
  --text-body: var(--stone-text-body);
  --text-muted: var(--stone-text-muted);
  --text-tertiary: var(--stone-text-tertiary);
  --border: var(--stone-border);
  --heading: var(--brand-navy);
  --tag-bg: var(--tag-violet-bg);
  --tag-border: var(--tag-violet-border);
  --tag-text: var(--tag-violet-text);
}
.mode-lavender {
  --bg: var(--lavender-bg);
  --surface: var(--lavender-surface);
  --text: var(--lavender-text);
  --text-body: var(--lavender-text-body);
  --text-muted: var(--lavender-text-muted);
  --text-tertiary: var(--lavender-text-tertiary);
  --border: var(--lavender-border);
  --heading: var(--brand-navy);
  --tag-bg: var(--tag-violet-bg);
  --tag-border: var(--tag-violet-border);
  --tag-text: var(--tag-violet-text);
}
.mode-midnight {
  --bg: var(--midnight-bg);
  --surface: var(--midnight-surface);
  --text: var(--midnight-text);
  --text-body: var(--midnight-text-body);
  --text-muted: var(--midnight-text-muted);
  --text-tertiary: var(--midnight-text-tertiary);
  --border: var(--midnight-border);
  --heading: var(--midnight-text);
  --tag-bg: var(--tag-violet-on-dark-bg);
  --tag-border: var(--tag-violet-on-dark-border);
  --tag-text: var(--tag-violet-on-dark-text);
}