/* ============================================================================
   00-TOKENS — Design tokens pulled directly from the Figma file.
   These become the single source of truth (and map cleanly to WP theme.json
   / ACF "Theme Settings" later). Change a value here, it updates everywhere.
   ============================================================================ */

:root {
  /* ---- Color palette --------------------------------------------------- */
  --color-cream:        #f6f5f1;  /* primary light / buttons */
  --color-cream-warm:   #f3f0eb;  /* warm section background + light text on dark */
  --color-offwhite:     #f9f9f7;  /* features + pricing section background */
  --color-white:        #ffffff;
  --color-ink:          #212121;  /* near-black text */
  --color-ink-soft:     #2c2c2c;  /* secondary text */
  --color-tan:          #e3d6c5;  /* serif headings on dark backgrounds */
  --color-rust:         #974315;  /* PRIMARY ACCENT */
  --color-rust-light:   #ae6740;  /* lighter rust (footer input, wordmark) */
  --color-olive:        #474b34;  /* closing CTA background */

  /* Text-on-X opacities used throughout the design */
  --ink-80:  rgba(0, 0, 0, .8);
  --ink-60:  rgba(0, 0, 0, .6);
  --tan-80:  rgba(227, 214, 197, .8);

  /* ---- Typography ------------------------------------------------------ */
  /* Headings use Instrument Serif (free, Google Fonts).
     Body uses Neue Montreal (licensed). If the licensed files are installed
     they win; otherwise Inter is loaded as a closely-matched fallback.
     Drop Neue Montreal @font-face into 01-base.css to activate it. */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Neue Montreal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — anchored to the Figma desktop (1600) & mobile (440)
     frames so both breakpoints match the source. */
  --fs-display: clamp(3rem, 1.6rem + 5.6vw, 5rem);      /* hero  48 → 80 */
  --fs-h2:      clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); /* section 36 → 60 */
  --fs-h3:      clamp(1.75rem, 1.3rem + 1.8vw, 3rem);    /* plan  28 → 48 */
  --fs-h4:      clamp(1.5rem, 1.2rem + 1.2vw, 2rem);     /* card/step 24 → 32 */
  --fs-lead:    1.5rem;   /* 24px */
  --fs-body:    1rem;     /* 16px */
  --fs-small:   .875rem;  /* 14px */

  --lh-tight: 1;      /* serif display "leading-none" */
  --lh-snug:  1.2;    /* serif sub-heads */
  --lh-body:  1.6;    /* all body copy */
  --tracking-body: .02em; /* ≈ 0.32px @16px */

  /* ---- Layout ---------------------------------------------------------- */
  --container:   1480px;          /* content width inside the 1600 frame */
  --gutter:      60px;            /* desktop side margin */
  --gutter-mob:  20px;            /* mobile side margin */
  --radius:      4px;             /* buttons / inputs */
  --radius-lg:   8px;             /* cards */
  --radius-pill: 30px;            /* glass pills */

  /* ---- Motion ---------------------------------------------------------- */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --dur:         .6s;
  --dur-fast:    .25s;

  --z-header: 100;
  --z-menu:   200;
  --z-modal:  300;
}