/* ASYST brand tokens. Colour, type, radius, elevation, motion, layout.
   No component rules here.
   Dual mode: violet is the accent in BOTH modes; only the surfaces swap.
   Every colour is verified by `node check-contrast.mjs`, which parses THIS file. */

:root {
  color-scheme: light;

  /* Colour, light (default) */
  --bg: #ffffff;
  --surface: #faf8fd;
  --surface-2: #f3eefb;
  --border: #e7e0f3;
  --border-strong: #8c7fa6;
  --text: #1b1130;
  --muted: #5b5170;
  --accent: #6d28d9;
  --accent-rgb: 109 40 217;
  --accent-hover: #5b21b6;
  --accent-contrast: #ffffff;
  --warn: #9a4a08;
  --warn-rgb: 154 74 8;

  /* Hero atmosphere. Never a flat hero. */
  --hero-glow: radial-gradient(ellipse 90% 60% at 50% -10%, rgb(var(--accent-rgb) / 0.14) 0%, transparent 70%);
  --hero-grid: rgb(var(--accent-rgb) / 0.07);

  /* Type families */
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Fluid type scale. Body 17-18px.
     The h1 floor is 2.25rem, not 2.5rem, so the hero fits a 390x844 viewport. */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0:  clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.4375rem, 1.3rem + 0.75vw, 1.875rem);
  --step-3:  clamp(1.8125rem, 1.5rem + 1.6vw, 2.75rem);
  --step-4:  clamp(2.25rem, 1.6rem + 3.1vw, 4rem);

  /* One radius scale, page-wide */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  /* Two shadows only */
  --shadow-card: 0 1px 2px rgba(27, 17, 48, 0.04), 0 4px 16px rgba(27, 17, 48, 0.06);
  --shadow-lift: 0 2px 4px rgba(27, 17, 48, 0.06), 0 12px 32px rgba(27, 17, 48, 0.10);

  /* Motion */
  --dur-micro: 0.16s;
  --dur-ui: 0.22s;
  --dur-reveal: 0.5s;

  /* Layout */
  --content-max: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 68ch;
  --nav-h: 4.5rem;
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg: #1a1024;
  --surface: #241533;
  --surface-2: #2e1c41;
  --border: #3d2955;
  --border-strong: #7a689a;
  --text: #ffffff;
  --muted: #b5a8c9;
  --accent: #a78bfa;
  --accent-rgb: 167 139 250;
  --accent-hover: #a78bfa;      /* no colour shift: buttons lift instead */
  --accent-contrast: #1a1024;   /* dark label: white on #a78bfa is only 2.72:1 */
  --warn: #f59e0b;
  --warn-rgb: 245 158 11;

  --hero-glow: radial-gradient(ellipse 90% 60% at 50% -10%, rgb(var(--accent-rgb) / 0.16) 0%, transparent 70%);
  --hero-grid: rgb(var(--accent-rgb) / 0.09);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45);
}