/* Parrot design tokens — color, type, spacing, motion
   ────────────────────────────────────────────────────
   Clean light register. Solid-white page surface with faint neutral-gray
   section banding (no warm/cream cast), neutral near-black text, one
   disciplined brand-orange (#FF5800) accent at ≤10% surface coverage. The
   cinematic hero stays dark; the trust band bridges into the light body
   below. No gradient text, no blue, no purple.

   Diagrams in pillar-diagrams.css consume the LEGACY tokens below
   (--paper / --ink / --parrot-orange / etc.) — those values are pinned to
   their original warm-paper appearance so the diagrams render unchanged.
   Never alias new light tokens over the legacy token names.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── LEGACY tokens — consumed by pillar-diagrams.css. Do not rename or re-theme. */
  --paper:         #FDFBF8;
  --paper-warm:    #F6F1E8;
  --bg-3:          #EEE7DA;
  --line:          #E8E0D6;
  --ink:           #1A1714;
  --ink-soft:      #5A544C;
  --parrot-orange: #E46425;
  --deep-orange:   #C44E15;
  --orange-soft:   #FBE5D6;
  --signal-green:  #2F8F5E;

  /* ── Surfaces — solid white with faint neutral-gray banding (no warm cast). */
  --surface:           #FFFFFF;               /* page default — solid white         */
  --surface-alt:       oklch(98% 0 0);        /* alternate sections, card surfaces  */
  --surface-elevated:  oklch(96.5% 0 0);      /* feature wraps                      */
  --surface-overlay:   oklch(8% 0.008 60);    /* hero shell (still dark, behind video) */

  /* ── Hairlines — faint neutral dark separators on white. */
  --hairline:          rgba(17, 17, 17, 0.08);
  --hairline-strong:   rgba(17, 17, 17, 0.16);
  --hairline-faint:    rgba(17, 17, 17, 0.04);

  /* ── Text — neutral near-blacks on white. */
  --text:              oklch(20% 0 0);
  --text-soft:         oklch(42% 0 0);
  --text-muted:        oklch(60% 0 0);

  /* ── Hero-region text — always sits on the dark video, regardless of page register. */
  --text-on-dark:      oklch(96% 0.005 80);
  --text-on-dark-soft: oklch(78% 0.005 80);

  /* ── Accent — brand orange #FF5800.
        Rare. Brand mark, primary CTA, eyebrow bar, one accent per feature.
        Stay under 10% surface coverage. */
  --accent:            #FF5800;                     /* brand orange — brand mark, primary CTA */
  --accent-deep:       #DB4B00;                     /* hover / active — darker brand orange   */
  --accent-soft:       #FFE8DC;                     /* soft orange wash — accent impact card  */
  --accent-foreground: #FFFFFF;                     /* text on accent button                  */

  /* ── Signal — live moments only. Reserved for genuine live-state communication. */
  --signal:            oklch(58% 0.13 150);
  --signal-soft:       oklch(58% 0.13 150 / 0.18);

  /* ── Type stacks — unified Inter family (Linear pattern). Inter at large sizes
       activates its opsz axis and produces display-grade glyphs (acts as Inter Display).
       Inter Tight carries body copy. IBM Plex Mono reserved for serials, prices, status. */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Layout */
  --container: 1200px;
  --nav-h:     64px;

  /* ── Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Elevation — soft warm card shadows for light; never cool grays, never pure black. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(26, 23, 20, 0.04), 0 8px 24px -12px rgba(26, 23, 20, 0.12);
  --shadow-2: 0 1px 3px rgba(26, 23, 20, 0.04), 0 12px 32px -8px rgba(26, 23, 20, 0.18);
  --shadow-hero: 0 24px 60px -20px rgba(0, 0, 0, 0.7);  /* floating UI inside the dark hero only */

  /* ── Motion — exponential ease-out (no bounce, no elastic). */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);    /* ease-out-expo */
  --ease-in:  cubic-bezier(0.4, 0, 0.2, 1);
}