/* css/tokens.css */
:root {

  /* ── Colors — Primary ─────────────────── */
  --color-primary-50: #E5F8FD;
  --color-primary-100: #B3ECFA;
  --color-primary-200: #7FDEF5;
  --color-primary-300: #4CD1F0;
  --color-primary-400: #1AC4EB;
  --color-primary-500: #00B2E3;
  --color-primary-600: #0091BB;
  --color-primary-700: #006F8F;
  --color-primary-800: #004D63;
  --color-primary-900: #002B37;

  /* ── Colors — Neutral ─────────────────── */
  --color-neutral-50: #F8F9FA;
  --color-neutral-100: #E0E2E3;
  --color-neutral-200: #C8CBCD;
  --color-neutral-300: #A8ACAF;
  --color-neutral-400: #878C90;
  --color-neutral-500: #666C71;
  --color-neutral-600: #4D5358;
  --color-neutral-700: #353B40;
  --color-neutral-800: #1E2428;
  --color-neutral-900: #0A0D0F;

  /* ── Colors — Semantic ────────────────── */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error: #DC2626;

  /* ── Typography — Families ────────────── */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Typography — Weights ─────────────── */
  --fw-thin: 200;
  --fw-extralight: 300;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* ── Typography — Scale ───────────────── */
  --text-display-2xl: 5rem;
  /* 80px  — hero headline */
  --text-display-xl: 3.75rem;
  /* 60px  — CTA headline */
  --text-display-lg: 3rem;
  /* 48px  — section headlines */
  --text-display-md: 2.25rem;
  /* 36px  — sub-headlines */
  --text-display-sm: 1.75rem;
  /* 28px  — card titles */
  --text-body-xl: 1.25rem;
  /* 20px  — lead / intro */
  --text-body-lg: 1.125rem;
  /* 18px  — large body */
  --text-body-md: 1rem;
  /* 16px  — default body */
  --text-body-sm: 0.875rem;
  /* 14px  — captions, meta */
  --text-body-xs: 0.75rem;
  /* 12px  — legal, form labels */
  --text-label-lg: 0.8125rem;
  /* 13px  — nav links */
  --text-label-md: 0.6875rem;
  /* 11px  — tags, overlines */

  /* ── Typography — Line Heights ────────── */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.7;
  --lh-relaxed: 1.7;

  /* ── Typography — Letter Spacing ──────── */
  --ls-tight-4: -0.04em;
  --ls-tight-3: -0.03em;
  --ls-tight-2: -0.02em;
  --ls-tight-1: -0.01em;
  --ls-normal: 0em;
  --ls-wide-4: +0.04em;
  --ls-wide-6: +0.06em;
  --ls-wide-8: +0.08em;
  --ls-wide-12: +0.12em;
  --ls-wide-14: +0.14em;
  --ls-wide-16: +0.16em;

  /* ── Spacing ──────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;
  --sp-40: 160px;

  /* ── Layout ───────────────────────────── */
  --container-max: 1280px;
  --container-pad: 40px;
  --container-pad-md: 24px;
  --container-pad-sm: 16px;
  --section-pad: 120px;
  --section-pad-md: 80px;
  --section-pad-sm: 60px;
  --col-gap: 32px;

  /* ── Shape ────────────────────────────── */
  --radius-none: 0px;
  /* used everywhere — no rounding */
  --radius-pill: 0px;
  /* still 0 — tags are square */

  /* ── Shadows ──────────────────────────── */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12);

  /* ── Transitions ──────────────────────── */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms ease;
  --t-slower: 400ms ease;
}