/* Fasboard design tokens: look A "Product Stage".
   Single source of truth; values match README "Design tokens" and site/assets/visual-kit.svg.
   Breakpoints are literal in media queries: 768px and 1024px. */

:root {
  color-scheme: light;

  /* Colour */
  --color-bg: #FBFAFC;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F4F1F8;
  --color-text: #1D1B22;
  --color-text-muted: #625A6B;
  --color-border: #E7E3EC;
  --color-accent: #281C32;
  --color-accent-hover: #3D2A4D;
  --color-accent-soft: #EFE9F5;
  --color-link: #5B3A7E;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #B6ABBE;

  /* Glow: only behind the hero stage and inside the subscriptions panel */
  --glow-base: #EBE8F3;
  --glow-violet: rgb(122 86 168 / 0.42);
  --glow-blue: rgb(86 140 255 / 0.34);
  --glow-teal: rgb(52 196 180 / 0.30);
  --glow-apricot: rgb(253 130 64 / 0.22);

  /* Department lights: a flat solid disc plus one flat halo ring in its tint */
  --dept-engineering: #34C77B;
  --dept-engineering-tint: #DDF5E8;
  --dept-creative: #FF8A5B;
  --dept-creative-tint: #FFE6DB;
  --dept-marketing: #9B7BFF;
  --dept-marketing-tint: #ECE5FF;
  --dept-finance: #4EA8FF;
  --dept-finance-tint: #DDEEFF;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-display: clamp(3rem, 1.4rem + 6.4vw, 7rem);
  --text-h2: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  --text-h3: 1.5rem;
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-nav: 0.9375rem;
  --text-eyebrow: 0.8125rem;
  --text-step-number: clamp(4rem, 2rem + 6vw, 7.5rem);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: clamp(20px, 5vw, 48px);
  --container: 1200px;
  --container-wide: 1360px;
  --section-pad: clamp(96px, 11vw, 176px);

  /* Radius */
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-tray: 32px;
  --radius-window: 16px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgb(40 28 50 / 0.05), 0 12px 32px rgb(40 28 50 / 0.06);
  --shadow-window: 0 2px 6px rgb(40 28 50 / 0.06), 0 40px 120px rgb(40 28 50 / 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-enter: 700ms;
  --dur-drift: 24s;
}