/* Design tokens : single source of truth, mirrors .claude/skills/brand-guidelines/SKILL.md */
:root {
  /* Color : brand */
  --color-primary: #0F2A47;
  --color-primary-light: #1E4C82;
  --color-accent: #F59E0B;
  --color-accent-dark: #D97706;
  --color-call: #0E9F6E;
  --color-call-dark: #057A55;

  /* Color : neutrals */
  --color-text: #0E1720;
  --color-text-muted: #5B6573;
  --color-border: #E5E8EC;
  --color-surface: #F6F7F9;
  --color-white: #FFFFFF;

  /* Color : feedback */
  --color-error: #DC2626;
  --color-success: #16A34A;

  /* Typography */
  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-lg: 1.125rem;
  --fs-h4: 1.25rem;
  --fs-h3: 1.3rem;
  --fs-h2: 1.6rem;
  --fs-h1: 2rem;
  --fs-display: 2.5rem;

  --lh-tight: 1.15;
  --lh-body: 1.6;
  --lh-small: 1.4;

  /* Spacing : 8px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(14, 23, 32, 0.05);
  --shadow-md: 0 4px 12px rgba(14, 23, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(14, 23, 32, 0.10);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;

  /* Motion */
  --t-fast: 150ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-base: 1.0625rem; /* 17px */
    --fs-h4: 1.25rem;
    --fs-h3: 1.56rem;
    --fs-h2: 1.95rem;
    --fs-h1: 2.44rem;
    --fs-display: 3.25rem;
    --gutter: 48px;
  }
}