/* ============================================================
   DESIGN TOKENS
   Single source of truth: colors, typography, spacing.
   Edit values here to re-skin the entire site.
   ============================================================ */

:root {
  /* ---- COLORS — mint-on-cream palette ---- */
  --color-bg:            #F5F6F1;   /* page background (cream) */
  --color-surface:       #FFFFFF;   /* cards / clean surfaces */
  --color-surface-alt:   #FBFCFA;   /* secondary surface */
  --color-surface-mint:  #F0F7F4;   /* mint-tinted surface */
  --color-surface-soft:  #C8E0D5;   /* mint divider line */

  --color-mint:          #036C4D;   /* primary mint */
  --color-mint-deep:     #1C4334;   /* deep mint (hover, emphasis) */
  --color-mint-mid:      #1B7858;   /* mid mint */
  --color-mint-soft:     #85CFAF;   /* soft mint accent */

  --color-display:       #000000;   /* hero numbers, headlines */
  --color-primary:       #1A1A1A;   /* body */
  --color-secondary:     #666666;   /* labels, secondary text */
  --color-disabled:      #999999;   /* meta, captions */

  --color-border:        #E8E8E8;   /* subtle dividers */
  --color-border-strong: #1A1A1A;   /* section dividers */

  /* ---- TYPOGRAPHY ---- */
  --font-sans:    'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fs-h1:        64px;
  --fs-h2:        36px;
  --fs-h3:        18px;
  --fs-body:      16px;
  --fs-small:     13px;
  --fs-label:     11px;
  --fs-caption:   12px;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;

  --ls-tight:    -0.03em;
  --ls-label:     0.14em;
  --ls-meta:      0.08em;
  --ls-mono-cap:  0.12em;

  /* ---- SPACING (8px base) ---- */
  --sp-2xs:   4px;
  --sp-xs:    8px;
  --sp-sm:    12px;
  --sp-md:    16px;
  --sp-lg:    24px;
  --sp-xl:    32px;
  --sp-2xl:   48px;
  --sp-3xl:   64px;
  --sp-4xl:   96px;
  --sp-5xl:   120px;

  /* ---- LAYOUT ---- */
  --container:    1400px;
  --section-pad:  120px 16px;

  /* ---- MOTION ---- */
  --ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast:     150ms;
  --dur-base:     250ms;

  /* ---- COMPONENT RADII ---- */
  --radius-pill:    999px;
  --radius-square:  0;
}

/* ============================================================
   MOBILE OVERRIDES — single source for the mobile type scale.
   Tweak numbers here to retune typography across the site.
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --fs-h1:      40px;
    --fs-h3:      17px;
    --fs-body:    15px;
    /* h2 keeps its clamp() in base.css — already adaptive */
    /* small / label / caption stay at desktop sizes */
  }
}