/* Lokstack design tokens — the single source for color, type, space, radius, elevation and motion.
   Mirrors brand/BRANDING.md. Components (site.css) only use these variables. */
:root {
  /* Brand: Scandinavian Calm. Evergreen structure, one mint signal, warm amber for Pro. No gradients. */
  --sp-brand-50: #ECFDF5;
  --sp-brand-100: #C7EBD8;
  --sp-brand-300: #6FFBBE;
  --sp-brand-400: #10B981;
  --sp-brand-500: #006C49;   /* Evergreen Signal: primary actions */
  --sp-forest: #1B3B2E;      /* Deep Forest: structure, active states */
  --sp-amber-300: #EA841A;
  --sp-amber-500: #D97706;   /* Warm Amber: the PRO mark only */
  /* Kept so older slides keep working: a "gradient" that is one flat colour */
  --sp-gradient: linear-gradient(var(--sp-brand-500), var(--sp-brand-500));
  --sp-gradient-soft: linear-gradient(var(--sp-brand-300), var(--sp-brand-300));

  /* Neutrals (Midnight → Cloud) */
  --sp-ink-900: #161816;    /* Warm Charcoal */
  --sp-ink-800: #1F2321;
  --sp-ink-700: #2A2F2C;
  --sp-ink-600: #3D423F;
  --sp-ink-500: #5B6478;
  --sp-ink-400: #8A93A8;
  --sp-ink-200: #E3E6EE;
  --sp-ink-100: #F0F2F7;
  --sp-ink-50:  #F8FAF6;    /* Chalk */
  --sp-white: #FFFFFF;

  /* Status (meaning only — never decoration) */
  --sp-green: #16A34A;  --sp-green-soft: #E7F6EC;
  --sp-amber: #B7791F;  --sp-amber-soft: #FDF4E3;
  --sp-red:   #DC2626;  --sp-red-soft: #FDECEC;
  --sp-coffee: #FFDD00;

  /* Typography */
  --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* Type scale on the 1920 × 1080 slide canvas */
  --fs-display: 112px;
  --fs-h1: 76px;
  --fs-h2: 64px;
  --fs-h3: 32px;
  --fs-lead: 34px;
  --fs-body: 27px;
  --fs-small: 22px;
  --fs-micro: 18px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --lh-tight: 1.04; --lh-snug: 1.25; --lh-body: 1.5;
  --tracking-display: -0.035em; --tracking-heading: -0.025em; --tracking-kicker: 0.14em;

  /* Space (8-point) */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 120px;

  /* Radius */
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(11, 16, 32, .04), 0 8px 24px rgba(11, 16, 32, .06);
  --shadow-float: 0 20px 50px rgba(11, 16, 32, .18);
  --shadow-window: 0 40px 100px rgba(11, 16, 32, .28), 0 0 0 1px rgba(11, 16, 32, .08);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}