/* ==========================================================================
   Speak Friend design tokens
   The single source of truth for color, type, space, radius and motion.
   Documented in DESIGN.md. Every other stylesheet references these
   variables; raw hex, px sizes or ad-hoc durations outside this file are bugs.
   ========================================================================== */

:root {
  /* ---- Brand primitives -------------------------------------------------
     The four brand colors come straight from the business card:
     Navy #1C497B, Rose #EF3859, Sand #D6C39A, Black. Scales are built
     around them in OKLCH so steps are perceptually even. */

  --navy-950: oklch(17% 0.035 256);
  --navy-900: oklch(22% 0.05 256);
  --navy-850: oklch(27% 0.06 256);
  --navy-800: oklch(32% 0.075 256);
  --navy-700: oklch(36.5% 0.085 256);
  --navy-600: oklch(40.1% 0.098 253.4); /* Brand Navy  #1C497B */
  --navy-500: oklch(48% 0.09 256);
  --navy-400: oklch(58% 0.08 256);

  --sand-50: oklch(96.5% 0.018 85);     /* Paper */
  --sand-100: oklch(93% 0.03 85);
  --sand-200: oklch(87% 0.045 85);
  --sand-300: oklch(82.3% 0.059 86);    /* Brand Sand  #D6C39A */
  --sand-500: oklch(68% 0.06 82);
  --sand-700: oklch(45% 0.05 80);

  --rose-100: oklch(93% 0.035 12);
  --rose-200: oklch(86% 0.07 12);
  --rose-400: oklch(70% 0.17 16);
  --rose-500: oklch(63% 0.217 16.6);    /* Brand Rose  #EF3859 */
  --rose-600: oklch(56% 0.19 18);
  --rose-700: oklch(49% 0.17 18);

  --black: oklch(0% 0 0);               /* Brand Black #000: all text on navy, as on the card */
  --ink: oklch(16% 0.02 256);           /* Black tinted toward navy: text on paper and rose, black strips */

  /* ---- Semantic color ---------------------------------------------------
     Components use these, never the primitives above.
     Contrast ratios (WCAG 2.x) are listed in DESIGN.md. */

  --color-bg: var(--navy-600);              /* page */
  --color-bg-sunken: var(--navy-800);       /* skeletons, empty frames */
  --color-paper: var(--sand-50);            /* the light surface: inputs, alerts */
  --color-strip: var(--ink);                /* black strips: video caption, menu */

  /* Text on navy is black, like the card (2.3:1, a brand choice). Page titles
     and the contact intro also wear a rose band, which lifts them to 5.4:1. */
  --color-text: var(--black);               /* headings, labels, nav                     2.3:1 */
  --color-text-body: var(--black);          /* paragraphs                                2.3:1 */
  --color-text-faint: var(--navy-800);      /* disabled only. Never for content.         1.4:1 */
  --color-link: var(--sand-300);            /* links and email on navy, as on the card   5.3:1 */
  --color-text-tan: var(--sand-300);        /* the contact form's field labels            5.3:1 */
  --color-text-on-strip: var(--sand-300);   /* tan on black strips                      11.2:1 */
  --color-text-on-strip-strong: var(--sand-50); /* headings on black strips             17.5:1 */
  --color-text-on-light: var(--ink);        /* any text on paper or sand                17.5:1 */
  --color-text-on-light-muted: var(--navy-700); /* secondary text on paper               9.6:1 */
  --color-text-on-accent: var(--ink);       /* text on rose fills                        5.0:1 */
  --color-placeholder: var(--navy-500);     /* placeholder on paper                      5.9:1 */

  --color-accent: var(--rose-500);          /* fills, marks, the monogram */
  --color-highlight: var(--rose-500);       /* the "selected" band: page titles, contact intro 5.4:1 */
  --color-accent-hover: var(--rose-400);
  --color-line: var(--black);               /* outlines on navy */
  --color-line-subtle: color-mix(in oklch, var(--black) 22%, transparent); /* dividers on navy */
  --color-line-on-strip: color-mix(in oklch, var(--sand-300) 22%, transparent); /* dividers on black strips */
  --color-hover-wash: color-mix(in oklch, var(--black) 12%, transparent);       /* hover fill for bare controls on navy */
  --color-focus: var(--sand-50);            /* focus rings stay light: 8.3:1 on navy */

  --color-danger: var(--rose-200);          /* error text on navy                        5.8:1 */
  --color-danger-on-light: var(--rose-700); /* error text on paper                       6.2:1 */
  --color-danger-border: var(--rose-600);   /* invalid field border on paper             4.6:1 */

  --color-scrim: color-mix(in oklch, var(--navy-950) 70%, transparent); /* dims the page around the player */

  /* ---- Typography -------------------------------------------------------
     Indivisible (Process Type) is the only web font, from the Adobe Fonts
     kit; Archivo stands in until the kit is connected. Amador appears only in
     the SF monogram, which is an SVG, so it never loads as a font. */

  --font-sans: "indivisible", "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Fluid modular scale: ~1.25 on phones opening to ~1.33 on desktop. */
  --step--1: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem); /* 13 → 14  labels, meta   */
  --step-0: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);       /* 16 → 18  body          */
  --step-1: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);       /* 20 → 24  lead, h3      */
  --step-2: clamp(1.5625rem, 1.4rem + 0.75vw, 2rem);       /* 25 → 32  h2, page titles */
  --step-3: clamp(1.95rem, 1.7rem + 1.25vw, 2.66rem);      /* 31 → 43  wordmark      */
  --step-4: clamp(2.44rem, 2rem + 2.2vw, 3.55rem);         /* 39 → 57  404 title     */
  --step-5: clamp(3.05rem, 2.3rem + 3.6vw, 4.75rem);       /* 49 → 76                */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-body: var(--weight-medium); /* one step heavier than usual: black on navy needs the stroke */

  --leading-display: 0.95;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --tracking-caps: 0.14em;        /* small uppercase labels */
  --tracking-wordmark: 0.08em;    /* SPEAK FRIEND */
  --tracking-title: 0.04em;       /* page titles in capitals */
  --tracking-body: 0.005em;

  --measure: 62ch;

  /* ---- Space ------------------------------------------------------------
     4px base. Named t-shirt steps; pick by relationship, not by pixel. */

  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs: 0.75rem;   /* 12 */
  --space-s: 1rem;       /* 16 */
  --space-m: 1.5rem;     /* 24 */
  --space-l: 2rem;       /* 32 */
  --space-xl: 3rem;      /* 48 */
  --space-2xl: 4.5rem;   /* 72 */
  --space-3xl: 7rem;     /* 112 */

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);           /* page edge; never below 16px */
  --rail: clamp(9.5rem, 7rem + 5vw, 13rem);              /* desktop header column */
  --lightbox-inset: clamp(0.75rem, 0.25rem + 2.5vw, 2.5rem); /* page showing around the player */
  --strip-h: 2.25rem;                                    /* thin black strips: caption bar, notice */

  /* ---- Sizing -----------------------------------------------------------*/

  --tap: 2.75rem;          /* 44px minimum hit area */
  --control-h: 3rem;       /* 48px buttons and inputs */
  --icon-s: 1rem;
  --icon-m: 1.5rem;

  --border: 1.5px;
  --border-thick: 2px;
  --focus-offset: 3px;     /* gap between a control and its focus ring */
  --focus-offset-lg: 6px;  /* for large media: the arch, thumbnails */

  /* ---- Radius -----------------------------------------------------------
     Straight edges everywhere. The arch is the only curve in the system. */

  --radius-none: 0;
  --radius-s: 2px;         /* buttons, inputs: takes the edge off, nothing more */
  --radius-round: 999px;   /* spinners and dots only */
  /* The arch: `border-radius: 50% 50% 0 0 / R R 0 0`, where R = half the
     width expressed as a % of the height (see DESIGN.md › Shape). It's written
     out per component because R depends on each element's proportions. */
  --arch-rise-home: 37.5%; /* the home arch: 3:4, full half-circle top (0.5 × 3/4) */
  --arch-scale: 0.6;       /* home arch size, as a share of the space available to it */
  --arch-rise-card: 26%;   /* 16:9 thumbnails morph to this on hover (a shallow arch) */

  /* ---- Elevation --------------------------------------------------------*/

  --shadow-lift: 0 1.5rem 3rem -1.25rem oklch(10% 0.03 256 / 0.7);
  --shadow-press: inset 0 2px 0 oklch(10% 0.03 256 / 0.28);

  /* ---- Motion -----------------------------------------------------------
     Exponential ease-outs only. No bounce, no elastic. */

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);       /* quart: hovers, presses */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* entrances, modals, menus */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* exits that must finish cleanly */

  --dur-instant: 90ms;   /* press feedback */
  --dur-fast: 160ms;     /* hover, color changes */
  --dur-base: 240ms;     /* menus, field messages */
  --dur-slow: 420ms;     /* lightbox, arch morph */
  --dur-slower: 700ms;   /* page-load reveals, poster crossfade */
  --stagger: 45ms;
  --press-shift: 1px;    /* how far a pressed control sinks */
  --rise: 0.75rem;       /* distance entrances travel */
  --rise-s: 0.5rem;      /* distance small elements travel (menu) */

  /* ---- Texture ----------------------------------------------------------*/

  --film-grain-opacity: 1; /* strength of the 8mm grain behind everything (1 = as scanned) */
  --grain-opacity: 0.08;   /* faint finer grain over the top, the arch video included */

  /* ---- Layers -----------------------------------------------------------*/

  --z-raised: 1;
  --z-header: 10;
  --z-menu: 20;
  --z-grain: 30;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --stagger: 0ms;
  }
}