/* ==========================================================================
   SVENDESIGNS — DESIGN TOKENS
   Single source of truth. Every component and page reads from these
   variables — never hardcode a color, size, or space value elsewhere.
   ========================================================================== */

:root {
  /* — Color — */
  --color-paper: #F5F6F3;        /* page background */
  --color-surface: #FFFFFF;      /* card / raised surface background */
  --color-ink: #14181F;          /* primary text, headlines */
  --color-slate: #4B5563;        /* secondary text */
  --color-line: #D8DBD6;         /* hairline borders/dividers */
  --color-signal: #C7551A;       /* accent — CTAs, active states, focus */
  --color-signal-tint: #F1E2D6;  /* accent background (badges, highlights) */

  /* — Type families — */
  --font-display: 'Montserrat', sans-serif;     /* headlines */
  --font-body: 'Roboto', sans-serif;            /* body copy, UI text */
  --font-mono: 'IBM Plex Mono', monospace;      /* labels, data, token names */

  /* — Type scale — */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.5rem;    /* 40px */
  --text-3xl: 3.5rem;    /* 56px */

  /* — Weight — */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* — Line height — */
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* — Space (4px base unit) — */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* — Radius — */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;

  /* — Border — */
  --border-hairline: 1px solid var(--color-line);

  /* — Shadow (used sparingly) — */
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow-lg: 0 24px 48px rgba(20, 24, 31, 0.24);

  /* — Audit annotation — */
  --color-good: #2F9E63;
  --color-on-dark: var(--color-paper);

  /* — Layout — */
  --content-max: 1120px;
  --line-max: 68ch;
}