/* Scaleaux design tokens — extracted from Brand Guidelines v1.0 */

:root {
  /* Primary palette (use ~60%) */
  --sx-navy: #0A1B2E;         /* Deep Navy — ink, dark surfaces, primary text on light */
  --sx-forest: #1D4D3F;       /* Forest Green — secondary headings, dark-surface alt */
  --sx-gold: #CDA34A;         /* Signature Gold — accent, CTAs, the "10%" accent color */
  --sx-sage: #6F8F6A;         /* Sage Green — supporting primary, icons, subtle fills */
  --sx-ivory: #F7F4EF;        /* Warm Ivory — light background */

  /* Secondary palette (use ~30%) */
  --sx-mist-blue: #B7C4D6;
  --sx-slate-blue: #4A6175;
  --sx-stone: #E7E2D6;
  --sx-seafoam: #A9BFAE;
  --sx-sand: #D6BE94;
  --sx-charcoal: #2B2E33;

  /* Semantic tokens — light mode */
  --bg: var(--sx-ivory);
  --surface: #ffffff;
  --surface-alt: var(--sx-stone);
  --ink: var(--sx-navy);
  --ink-soft: var(--sx-slate-blue);
  --accent: var(--sx-gold);        /* CTAs, links, key numerals */
  --accent-alt: var(--sx-forest);  /* secondary headings, dark badges */
  --line: var(--sx-mist-blue);

  /* Typography */
  --font-display: 'Poppins', system-ui, sans-serif;  /* H1–H3, hero statements */
  --font-body: 'Inter', system-ui, sans-serif;        /* body, captions, labels */

  /* Type scale (from guideline, page 15) */
  --h1-size: 56px; --h1-lh: 64px; --h1-ls: -0.5px; --h1-weight: 700; /* Poppins Bold */
  --h2-size: 28px; --h2-lh: 36px; --h2-ls: -0.2px; --h2-weight: 600; /* Poppins SemiBold */
  --h3-size: 18px; --h3-lh: 28px; --h3-ls: 1.5px;  --h3-weight: 500; /* Poppins Medium, uppercase */
  --body-size: 16px; --body-lh: 24px; --body-ls: 0px;   --body-weight: 400; /* Inter Regular */
  --caption-size: 12px; --caption-lh: 16px; --caption-ls: 0.5px; --caption-weight: 400; /* Inter Regular */
}

/* This is the production marketing site, not a Claude artifact — it does not
   auto-switch with the visitor's OS theme. The brand guideline only defines a
   light presentation, so tokens stay fixed to that. A future dark-mode section
   (e.g. footer) can still opt in explicitly via [data-theme="dark"] scoping. */
:root[data-theme="dark"] {
  --bg: var(--sx-navy);
  --surface: #101d30;
  --surface-alt: var(--sx-charcoal);
  --ink: var(--sx-ivory);
  --ink-soft: var(--sx-mist-blue);
  --accent: var(--sx-gold);
  --accent-alt: var(--sx-seafoam);
  --line: var(--sx-slate-blue);
}

/* Contrast pairs verified in guideline (page 12):
   Dark text (--sx-navy) on: white 17.1:1, ivory 12.3:1, mist-blue 6.2:1 — all pass.
   Light text (ivory/white) on: navy 16.6:1, forest 10.7:1, slate-blue 5.3:1 — all pass.
   Usage ratio: 60% primary / 30% secondary / 10% gold accent. Don't invert this —
   gold is an accent, not a base color. */