/* ---------------------------------------------------------------------------
   Reneca marketing site — design tokens.

   Every value below is copied byte-for-byte from `src/index.css`'s `@theme`
   block (the app's canonical token definition, itself canonical against
   `docs/design-system.md` §3.10). `site/tokens.test.ts` parses both files and
   fails the moment a value here drifts from the app's. If a token needs to
   change, change it in `src/index.css` first, then copy the new value here —
   never the other way round.

   The only two permitted differences are `--font-serif` and `--font-sans`:
   the app loads self-hosted variable fonts via `@fontsource-variable`, and
   this static site has no build step to bundle them, so it names the same
   two typefaces ('Crimson Pro' and 'Inter') as they are published on Google
   Fonts instead. `tokens.test.ts` excludes exactly these two names from the
   identical-value assertion.
   --------------------------------------------------------------------------- */

:root {
  /* Type — Google Fonts names, see header comment. Every other token below
     is unchanged from the app. */
  --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display: 32px;
  --text-display--line-height: 1.15;
  --text-title-lg: 24px;
  --text-title-lg--line-height: 1.25;
  --text-title-md: 20px;
  --text-title-md--line-height: 1.3;
  --text-title-sm: 17px;
  --text-title-sm--line-height: 1.35;
  --text-body-lg: 17px;
  --text-body-lg--line-height: 1.7;
  --text-body: 16px;
  --text-body--line-height: 1.65;
  --text-body-sm: 15px;
  --text-body-sm--line-height: 1.55;
  --text-quote: 16px;
  --text-quote--line-height: 1.6;
  --text-ui-lg: 15px;
  --text-ui-lg--line-height: 1.45;
  --text-ui: 14px;
  --text-ui--line-height: 1.5;
  --text-ui-sm: 13px;
  --text-ui-sm--line-height: 1.45;
  --text-label: 12px;
  --text-label--line-height: 1.2;
  --text-label-sm: 11px;
  --text-label-sm--line-height: 1.2;

  --tracking-tight: -0.01em;
  --tracking-label: 0.08em;
  --tracking-label-sm: 0.1em;

  /* Ink — one violet-tinted neutral ramp. No untinted greys anywhere. */
  --color-ink-900: #1c1633;
  --color-ink-700: #3a3355;
  --color-ink-500: #625c7d;
  --color-ink-400: #8c87a3;
  --color-ink-300: #bdb8ce;
  --color-ink-200: #e9e4f8;
  --color-ink-100: #f0eef8;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-sunken: #f7f6f2;
  --color-page: #f7f5ff;
  --color-nav: #13102a;

  /* Semantic accents — closed set of five strategic roles */
  --color-accent-purpose: #7c3aed;
  --color-accent-opportunity: #b45309;
  --color-accent-alignment: #15803d;
  --color-accent-risk: #dc2626;
  --color-accent-ground: #1c1633;
  --color-accent-on-dark: #a78bfa;

  /* Dark grounds — the stage. `stage` equals `nav` on purpose: the landing's
     original #140E30 is indistinguishable from #13102A, so one value serves
     both the rail and the stage. */
  --color-stage-deep: #0b081f;
  --color-stage: #13102a;
  --color-stage-raised: #241a4d;

  /* On-dark accents — every one clears 4.5:1 on all three stage surfaces, so
     it may carry text as well as a bar. */
  --color-accent-purpose-on-dark: #a78bfa;
  --color-accent-opportunity-on-dark: #fbbf24;
  --color-accent-alignment-on-dark: #4ade80;
  --color-accent-risk-on-dark: #f87171;
  --color-accent-ground-on-dark: #e9e4f8;

  /* Feedback — system voice, never body text */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;
  --color-success-on-dark: #4ade80;
  --color-warning-on-dark: #fbbf24;
  --color-danger-on-dark: #f87171;
  --color-info-on-dark: #38bdf8;

  --gradient-brand: linear-gradient(135deg, #7c3aed, #9333ea);

  /* Gradients are text and avatar only (design-system.md §3.2, D187). These
     two are the text ones, consumed through `.text-gradient-brand` /
     `.text-gradient-on-dark` in site.css. */
  --gradient-text-brand: linear-gradient(135deg, #7c3aed, #9333ea);
  --gradient-text-on-dark: linear-gradient(120deg, #a78bfa, #e9d5ff);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Elevation — every shadow is a paired soft-and-tight layer */
  --shadow-card: 0 1px 3px rgba(28, 22, 51, 0.04), 0 4px 24px rgba(28, 22, 51, 0.06);
  --shadow-lifted: 0 2px 6px rgba(28, 22, 51, 0.05), 0 16px 40px rgba(124, 58, 237, 0.14);
  --shadow-overlay: 0 8px 16px rgba(28, 22, 51, 0.06), 0 32px 64px rgba(28, 22, 51, 0.16);

  /* Borders */
  --border-hairline: 1px;
  --border-interactive: 2px;
  --border-accent-rule: 3px;

  /* Motion */
  --duration-instant: 120ms;
  --duration-fast: 180ms;
  --duration-base: 240ms;
  --duration-slow: 320ms;
  --duration-flash: 400ms;
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sheet: cubic-bezier(0.32, 0, 0.2, 1);
}