/* ============================================================================
   tokens.css — design system foundation, shared by every generated client site.

   Three layers, in dependency order:
     1. BRAND PRIMITIVES  — the only values that change per client. The render
                            script injects a :root override for these from
                            client.json. Defaults here are deliberately neutral
                            so a client.json missing a `brand` block produces a
                            plain professional site, never someone else's brand.
     2. SEMANTIC          — derived from layer 1. Never set these per client;
                            they are what components actually reference.
     3. SCALE & MOTION    — type scale, spacing, easing. Fixed across clients.

   Extracted and consolidated from the four hand-built pages in /website, which
   each carried a near-identical copy of this block. Kept as one file so a color
   change is one edit instead of four.
   ========================================================================== */

:root{
  /* --- 1. BRAND PRIMITIVES (overridden per client) --------------------- */

  /* Dark ramp. 900 is the page background in dark mode; 800 and 700 are
     elevated surfaces (cards, bands). Keep these close in lightness — the
     contrast that carries the design comes from the accent, not the ramp. */
  --brand-900:#141821;
  --brand-800:#1b212c;
  --brand-700:#232b38;

  /* Accent. Used for eyebrows, stat numbers, primary buttons, focus rings.
     `-bright` is the hover state and should be a few points lighter. */
  --accent:#b8763a;
  --accent-bright:#cc8848;

  /* Text that sits on the accent (primary button labels). Must clear 4.5:1
     against --accent — a dark value for light accents, white for dark ones. */
  --accent-ink:#16100a;

  /* Secondary accent. Optional; used for alternating section treatments and
     the secondary badge color. Defaults to a desaturated slate. */
  --alt:#4a5a6b;
  --alt-bright:#5d7183;

  /* Light-mode paper. Overridden per client so a brand can carry a warm or
     cool light theme independently of its dark ramp. */
  --paper:#f5f4f0;
  --paper-elev:#ffffff;
  --paper-elev-2:#eceae4;
  --paper-ink:#161c26;
  --paper-ink-muted:#4e5a68;

  /* Typography. Client-overridable; both fall back through a system stack so a
     failed webfont load degrades rather than breaks. */
  --font-display:'Clash Display',Georgia,'Times New Roman',serif;
  --font-body:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  /* --- 2. SEMANTIC (derived — do not set per client) ------------------- */

  --bg:var(--brand-900);
  --bg-elev:var(--brand-700);
  --bg-elev-2:var(--brand-800);
  --fg:#eef1f5;
  --fg-muted:#a6b1be;

  --border-soft:rgba(255,255,255,.09);
  --border-accent:color-mix(in srgb, var(--accent) 20%, transparent);
  --surface-subtle:rgba(255,255,255,.03);

  /* Scrolled-header background. color-mix keeps this tied to --bg so it
     tracks the client's palette automatically, and it degrades to an opaque
     --bg on browsers without color-mix rather than going transparent. */
  --header-bg:color-mix(in srgb, var(--bg) 88%, transparent);

  --shadow-md:0 12px 32px rgba(0,0,0,.35);
  --shadow-lg:0 24px 64px rgba(0,0,0,.46);
  --shadow-accent:0 10px 26px color-mix(in srgb, var(--accent) 28%, transparent);

  /* --- 3. SCALE & MOTION (fixed) --------------------------------------- */

  --maxw:1280px;
  --radius:3px;
  --radius-sm:4px;
  --radius-lg:8px;

  --text-hero:clamp(2.6rem, 0.6rem + 6.2vw, 5.6rem);
  --text-3xl:clamp(2.2rem, 1rem + 3.6vw, 4.2rem);
  --text-2xl:clamp(1.8rem, 1.2rem + 2vw, 3rem);
  --text-xl:clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --text-lg:clamp(1.1rem, 1rem + .4vw, 1.3rem);

  --space-section:clamp(80px, 10vw, 160px);
  --space-gutter:clamp(20px, 4vw, 48px);

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
}

/* Light theme. Only remaps the semantic layer — brand primitives are untouched,
   so the accent stays consistent across both modes. */
html[data-theme="light"]{
  --bg:var(--paper);
  --bg-elev:var(--paper-elev);
  --bg-elev-2:var(--paper-elev-2);
  --fg:var(--paper-ink);
  --fg-muted:var(--paper-ink-muted);
  --border-soft:rgba(20,28,40,.11);
  --surface-subtle:rgba(20,28,40,.02);
  --shadow-md:0 12px 30px rgba(20,28,40,.12);
  --shadow-lg:0 24px 50px rgba(20,28,40,.16);
}

/* Respect an OS preference when no explicit theme is set on <html>. The theme
   toggle writes data-theme, which wins over this. */
@media (prefers-color-scheme: light){
  html:not([data-theme]){
    --bg:var(--paper);
    --bg-elev:var(--paper-elev);
    --bg-elev-2:var(--paper-elev-2);
    --fg:var(--paper-ink);
    --fg-muted:var(--paper-ink-muted);
    --border-soft:rgba(20,28,40,.11);
    --surface-subtle:rgba(20,28,40,.02);
    --shadow-md:0 12px 30px rgba(20,28,40,.12);
    --shadow-lg:0 24px 50px rgba(20,28,40,.16);
  }
}