/* =========================================================
   variables.css — all design tokens (from STYLE_GUIDE.md)
   Do not hardcode magic numbers in component files; use these.
   ========================================================= */

:root {
  /* ---- Typography (§3) ---- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', sans-serif;

  /* Weights */
  --fw-body: 400;
  --fw-label: 500;
  --fw-subhead: 600;
  --fw-title: 700;

  /* Fluid type scale */
  --fs-nav: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --fs-h2: clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
  --fs-h1: clamp(3rem, 2.2rem + 4vw, 6rem);
  --fs-title-xl: clamp(3.5rem, 2.5rem + 5vw, 8rem);

  /* Letter spacing for labels/nav */
  --tracking-label: 0.08em;

  /* Line heights */
  --lh-title: 1;
  --lh-body: 1.55;

  /* ---- Color (§4) ---- */
  --bg: #FCF5F3;      /* warm off-white */
  --bg-alt: #F3ECE9;  /* card hover / section alternation */
  --text: #17150F;    /* near-black */
  --text-mute: #6E6A63; /* metadata, captions */
  --line: #DCD3CE;    /* hairline dividers */
  --accent: #17150F;  /* monochrome accent */

  /* Quiet per-discipline tints (4-8%) */
  --tint-software: rgba(40, 70, 120, 0.05);
  --tint-film: rgba(140, 70, 40, 0.05);

  /* ---- Spacing & grid (§5) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --grid-gap: var(--space-3);
  --measure: 62ch; /* max body line length */

  /* ---- Motion (§6) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 350ms;
  --dur-slow: 600ms;

  /* ---- Breakpoints (§8) — mirrored in media queries ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1080px;
  --bp-xl: 1440px;

  /* ---- Layout chrome ---- */
  --header-h: 4.5rem;
  --radius: 4px;
}