/**
 * Design tokens. Every color, spacing value, radius, and shadow used anywhere
 * on the site should reference one of these — never a raw hex/px value in a
 * component file. This is what keeps every page consistent.
 */
:root {
  /* Color — per the agreed palette, deliberately narrow (avoid bright colors) */
  --color-bg: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-border: #e2e8f0;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-bg: #eff6ff;
  --color-success: #22c55e;
  --color-success-bg: #f0fdf4;
  --color-danger: #ef4444;
  --color-danger-bg: #fef2f2;

  /* Text on dark surfaces (footer, dark CTA bands) */
  --color-dark-bg: #0f172a;
  --color-dark-bg-secondary: #16213e;
  --color-dark-text: #f8fafc;
  --color-dark-text-secondary: #94a3b8;
  --color-dark-border: rgba(248, 250, 252, 0.1);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale — 4px base, used for every margin/padding/gap */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadow — soft, never heavy */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 16px -4px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 16px 40px -12px rgb(15 23 42 / 0.14), 0 4px 12px -4px rgb(15 23 42 / 0.06);
  --shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.25);

  /* Layout */
  --content-max: 1280px;
  --content-narrow: 760px;

  /* Motion — subtle, consistent easing everywhere */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
}