/* TimeCode Play — design tokens (v1.0, 2026-10-26)
   Every variable below is used by styles.css. Values are in CSS px unless noted. */

:root {
  /* Colour — surfaces */
  --color-bg: #08090B;            /* page background, header */
  --color-bg-raised: #0E1013;     /* features section band */
  --color-section: #0C0D11;       /* "In the app" section core */
  --color-surface: #16181C;       /* cards, panels */
  --color-surface-hover: #1B1E23; /* card hover */
  --color-surface-2: #1E2127;     /* link-card hover, pressed */
  --color-field: #121418;         /* form fields, notices */

  /* Colour — text (contrast on --color-bg / --color-surface) */
  --color-text: #ECEEF2;          /* headings, primary text — 17.2:1 on bg */
  --color-text-body: #CDD1D8;     /* lead paragraph — 13.0:1 on bg */
  --color-text-muted: #C3C7CF;    /* body copy, captions — 11.8:1 on bg, 10.5:1 on surface */
  --color-text-subtle: #A8ADB8;   /* footer links, meta — 8.9:1 on bg, 7.9:1 on surface */
  --color-text-meta: #8C929C;     /* labels (DEVICES, SYSTEM…) — 6.4:1 on bg, 5.7:1 on surface */

  /* Colour — accent and states */
  --color-accent: #F2A93B;        /* spot amber: primary button, labels, focus — 10.0:1 on bg, 8.9:1 on surface */
  --color-accent-hover: #FFC061;
  --color-accent-pressed: #B07820;
  --color-on-accent: #07080A;     /* text on amber — 10.0:1 (hover 12.4:1, pressed 5.3:1) */
  --color-glow-cool: #4C7DFF;     /* decorative blurred glow only, never text */
  --color-error: #FF7A86;         /* error text and field border — 7.4:1 on field, 7.1:1 on surface */
  --color-success: #4FD98A;       /* success text — 10.2:1 on field */
  --color-focus: #F2A93B;

  /* Colour — lines */
  --color-line: rgba(255, 255, 255, 0.08);        /* decorative dividers */
  --color-line-strong: rgba(255, 255, 255, 0.14); /* section rules, card borders on hover base */
  --color-line-control: #666C76;                  /* meaningful control borders — 3.8:1 on bg, 3.4:1 on surface, 3.5:1 on field */

  /* Typography */
  --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-h1: clamp(40px, 5.4vw, 68px);
  --fs-h1-mobile: 32px;
  --fs-h1-page: clamp(36px, 4.4vw, 56px);     /* H1 on help / support / privacy / 404 */
  --fs-h2: clamp(28px, 2.8vw, 40px);
  --fs-h2-large: clamp(30px, 3.6vw, 44px);
  --fs-h2-small: clamp(28px, 3vw, 36px);
  --fs-h3: 21px;
  --fs-lead: clamp(18px, 1.6vw, 21px);
  --fs-body: 17px;
  --fs-caption: 16px;
  --fs-small: 15px;
  --fs-footer: 14px;
  --fs-eyebrow: 13px;
  --fs-label: 12px;
  --lh-tight: 1.04;
  --lh-heading: 1.12;
  --lh-body: 1.55;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-h1: -0.03em;
  --tracking-h2: -0.02em;
  --tracking-label: 0.14em;

  /* Spacing and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-pad: clamp(64px, 9vw, 112px);
  --header-h: 80px;
  --tap-min: 44px;

  /* Radius */
  --radius-sm: 8px;
  --radius-field: 12px;
  --radius-notice: 14px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --radius-phone: 50px;
  --radius-phone-screen: 41px;

  /* Elevation */
  --shadow-card-hover: 0 22px 44px -20px rgba(0, 0, 0, 0.85);
  --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-menu: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --shadow-phone: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 3px #050506, 0 0 0 1px rgba(0, 0, 0, 0.9), 0 50px 90px -30px rgba(0, 0, 0, 0.9), 0 20px 40px -16px rgba(0, 0, 0, 0.7);

  /* Motion */
  --ease-ui: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-menu: 0.22s;
  --dur-reveal: 0.9s;
  --dur-reveal-phone: 1.15s;
  --dur-hero-zoom: 2.6s;
}