/* Hallmark · macrostructure: studied-DNA band-rhythm (photo-band cadence, typographic)
 * theme: studied-DNA (source: awesome-design-md/bmw-m DESIGN.md)
 * paper: oklch(0% 0 0) #000 · ink: #fff · body: #bbb (light-300)
 * accents: quadricolor signature stripe — road #e22718 · sea #0066b1 · sky #a7b0ba · time #c9a35c
 * display: Inter 700 UPPERCASE (BMW Type Next substitute, -0.5px tracking) · body: Inter 300 · data: JetBrains Mono
 * nav: N9 edge-aligned (adapted BMW top-nav) · footer: Ft5 statement + link columns
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

:root {
  /* Surfaces */
  --c-canvas: #000000;
  --c-surface-soft: #0d0d0d;
  --c-surface: #1a1a1a;
  --c-elevated: #262626;
  --c-carbon: #2b2b2b;

  /* Hairlines */
  --c-hairline: #3c3c3c;
  --c-hairline-strong: #262626;

  /* Text */
  --c-ink: #ffffff;
  --c-body: #bbbbbb;
  --c-body-strong: #e6e6e6;
  --c-muted: #8a8a8a;

  /* Signature stripe — brand-identity only. Never text, never a button fill. */
  --c-road: #e22718;
  --c-sea: #0066b1;
  --c-sky: #a7b0ba;
  --c-time: #c9a35c;

  /* Type */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-display-xl: clamp(2.75rem, 1.2rem + 6.2vw, 5rem);      /* 44 → 80 */
  --text-display-lg: clamp(2.125rem, 1.1rem + 4vw, 3.5rem);     /* 34 → 56 */
  --text-display-md: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);    /* 28 → 40 */
  --text-display-sm: clamp(1.5rem, 1.25rem + 1vw, 2rem);        /* 24 → 32 */
  --text-title-lg: 1.5rem;
  --text-title-md: 1.25rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-sm: 0.875rem;
  --text-caption: 0.75rem;

  --track-label: 0.107em;   /* ~1.5px @ 14px — machined uppercase labels */
  --track-display: -0.01em; /* Inter substitute tightening per the source spec */

  /* Space — 4pt scale */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-xxl: 64px;
  --sp-section: clamp(64px, 5vw + 40px, 96px);

  /* Shape — sharp rectangles are the brand */
  --radius-none: 0;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-reveal: 640ms;

  /* Layout */
  --wrap: 1440px;
  --wrap-text: 68ch;
}