/* ═══════════════════════════════════════════════════════
   Works case study token base — sourced from config/siteConfig.js
   Used by: globals.css, autotrader-digital-retailing-case-study.html
   Regenerate: npm run tokens:works
   ═══════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Colour — siteConfig.theme */
  --color-bg: #F5F5F5;
  --color-fg: #0A0B0C;
  --color-accent: #4AC8E8;
  --color-accent-hover: #24A89E;
  --color-surface: #F2F8FA;
  --color-surface-2: #D6E8EC;
  --color-border: #E5E5E5;
  --color-border-soft: color-mix(in srgb, var(--color-border), transparent 45%);
  --color-grey: #0D3D3A;
  --color-grey-mid: #0D3D3A;
  --color-navy: #0A0B0C;
  --color-gold-light: #7DDFF2;
  --color-core-teal: #1A7A73;
  --color-pixel-blue: #2D8EBF;
  --color-void: #0A0B0C;
  --color-deep-teal: #0D3D3A;
  --color-bright-teal: #24A89E;
  --color-cyan-strike: #4AC8E8;
  --color-cyan-light: #7DDFF2;
  --color-steel: #B8D4D8;
  --color-fog: #D6E8EC;
  --color-white: #F2F8FA;
  --color-off-white: #F5F5F5;
  --color-light-gray: #E5E5E5;
  --teal-text: #0D3D3A;
  --teal-accent: #1A7A73;

  /* Typography — matches app/globals.css */
  --font-display: "nexa", "Nexa", "termina", "neue-haas-grotesk-display", "Helvetica Neue", system-ui, sans-serif;
  --font-heading: "nexa", "Nexa", "termina", "neue-haas-grotesk-text", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "nexa-text", "nexa", "Nexa", "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-label: "nexa-text", "nexa", "Nexa", "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 400ms;
  --duration-mid: 600ms;
  --duration-slow: 800ms;
  --reveal-duration: 0.5s;
  --reveal-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --reveal-stagger-step: 130ms;
  --reveal-stagger-max: 6;
  --reveal-distance: 20px;
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-arrive: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-text: 0.6s;
  --dur-move: 0.75s;
  --dist-text: 20px;
  --dist-card: 40px;
  --dist-side: 88px;
  --stagger: 130ms;
  --seq: 120ms;

  /* Sizing — 8pt scale */
  --size-0: 0px;
  --size-50: 4px;
  --size-100: 8px;
  --size-150: 12px;
  --size-200: 16px;
  --size-300: 24px;
  --size-400: 32px;
  --size-500: 40px;
  --size-600: 48px;
  --size-700: 56px;
  --size-800: 64px;
  --size-900: 72px;
  --size-1000: 80px;
  --size-1100: 88px;
  --size-1200: 96px;

  /* Static HTML case study aliases (autotrader-digital-retailing-case-study.html) */
  --void: var(--color-bg);
  --void-2: var(--color-surface);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --line: var(--color-border);
  --teal: var(--color-core-teal);
  --teal-deep: var(--color-deep-teal);
  --cyan: var(--color-cyan-strike);
  --cyan-soft: var(--color-cyan-light);
  --text: var(--color-fg);
  --muted: var(--color-grey);
  --muted-2: var(--color-grey-mid);
  --warn: #f0a35e;
  --warn-deep: #b86a3a;
}