/* ============================================================
   DESIGN TOKENS
   — Edit these to change the entire site's look and feel
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:         #ffffff;
  --color-text:       #000000;
  --color-text-muted: #666666;
  --color-border:     #e5e5e5;
  --color-accent:     #f0ede6;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:   Georgia, 'Times New Roman', serif;

  /* Fluid type scale — scales between min and max viewport */
  --text-xs:    clamp(0.65rem,  0.8vw,  0.75rem);
  --text-sm:    clamp(0.8rem,   1vw,    0.9rem);
  --text-base:  clamp(0.95rem,  1.2vw,  1.05rem);
  --text-md:    clamp(1.1rem,   1.5vw,  1.3rem);
  --text-lg:    clamp(1.4rem,   2.5vw,  2rem);
  --text-xl:    clamp(2rem,     4vw,    3.5rem);
  --text-2xl:   clamp(3rem,     7vw,    6.5rem);
  --text-3xl:   clamp(4rem,     10vw,   9rem);

  /* ── Line Heights ───────────────────────────────────────── */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  /* ── Letter Spacing ─────────────────────────────────────── */
  --tracking-tight:  -0.04em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;
  --space-2xl: 12rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --container:     1440px;
  --gutter:        clamp(1.25rem, 3vw, 2.5rem);
  --nav-height:    4rem;

  /* ── Transitions ────────────────────────────────────────── */
  --duration-fast: 0.3s;
  --duration-med:  0.6s;
  --duration-slow: 1s;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.87, 0, 0.13, 1);

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    10;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
}