/* ==========================================================
   Design tokens: the single source of truth for the site.
   Change a value here and every page updates.
   ========================================================== */
:root {
  /* Color */
  --color-bg: #F3F4F6;          /* page background */
  --color-surface: #FFFFFF;     /* cards, strips */
  --color-ink: #0F1720;         /* headings, primary text */
  --color-ink-soft: #374151;    /* body text */
  --color-ink-muted: #4B5563;   /* captions, labels */
  --color-line: #E1E3E8;        /* hairlines, header border */
  --color-line-soft: #4B556322; /* section dividers */
  --color-accent: #2F4BFF;      /* links, primary button, highlights */
  --color-on-accent: #FFFFFF;
  --color-tag-line: #C9CDD3;    /* tag / pill borders */
  --color-placeholder: #E9EBEE; /* image backgrounds while loading */
  --color-success: #1F9D55;     /* "available" dot */

  /* On dark blocks */
  --color-on-dark: #FFFFFF;
  --color-on-dark-soft: #D1D5DB; /* body text on ink */
  --color-on-dark-muted: #AAB2BD;/* labels on ink */
  --color-dark-line: #3A4250;    /* pill borders on ink */
  --color-dark-raised: #161F2B;  /* code panels on ink */

  /* Type */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 1.0625rem; /* 17px */
  --text-lead: 1.1875rem; /* 19px */
  --text-h1: clamp(2.875rem, 7vw, 5.75rem); /* 46px to 92px */
  --text-xs: 0.75rem;     /* 12px, mono labels */
  --text-md: 0.9375rem;   /* 15px */
  --text-card: 1rem;      /* 16px, card body */
  --text-h2: clamp(2rem, 4vw, 2.75rem);     /* 32px to 44px */
  --text-h2-sm: clamp(1.75rem, 3vw, 2.25rem); /* 28px to 36px, case-study chapters */
  --text-h3: 1.625rem;    /* 26px */
  --text-stat: clamp(2.75rem, 5vw, 3.5rem); /* 44px to 56px */

  /* Space & shape */
  --page-max: 1200px;
  --page-pad: 32px;
  --read-max: 760px;      /* case-study reading column */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-media: 12px;   /* images inside cards */
  --radius-frame: 16px;   /* embeds, sliders */
  --radius-lg: 24px;      /* hero images, dark figures */
  --radius-xl: 32px;      /* dark closing block */

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

@media (max-width: 600px) {
  :root { --page-pad: 20px; }
}