/* =====================================================================
   tokens.css — design tokens for FlipFix Digital
   Editorial / trade-publication aesthetic. Warm, serif-led, no SaaS gloss.
   ===================================================================== */

:root {
  /* ---------- Color ----------
     Core palette is locked by SPEC. Derived tokens below stay in the same
     warm family — no cool-toned neutrals, no gradients. */
  --bg-cream: #F6F2EC;
  --ink: #1A1A1A;
  --gold: #A89060;
  --warm-gray: #6B6258;

  /* Derived neutrals — for section alternation, hairlines, soft text */
  --bg-cream-deep: #EFE8DC;
  --bg-cream-soft: #FAF7F2;
  --ink-soft: #2A2A2A;
  --gold-deep: #8C7448;
  --gold-soft: #C2AE82;
  --rule: rgba(26, 26, 26, 0.14);
  --rule-soft: rgba(26, 26, 26, 0.08);
  --shadow-ink: rgba(26, 26, 26, 0.06);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Editorial type scale — fluid clamp() for display, fixed for prose.
     Tightened Apr 2026: hero was wrapping 6 lines at 1280px. Display caps are
     now 64px (h1) / 48px (h2), with body line-height pulled to 1.5 so the
     whole page reads ~30% more compact. Catalog/trade-pub rhythm, not magazine
     feature rhythm. */
  --fs-h1: clamp(2.25rem, 2.5vw + 1rem, 4rem);
  --fs-h2: clamp(1.75rem, 1.75vw + 0.75rem, 3rem);
  --fs-h3: clamp(1.5rem, 1vw + 1rem, 2rem);
  --fs-h4: 1.3125rem;
  --fs-h5: 1.0625rem;
  --fs-h6: 0.8125rem;
  --fs-lede: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-small: 0.75rem;

  /* Line heights — tightened for compact trade/catalog feel */
  --lh-display: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-tight: 1.3;
  --lh-body: 1.5;
  --lh-caption: 1.45;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-h2: -0.015em;
  --tracking-h3: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.14em;
  --tracking-button: 0.02em;

  /* Font weights — Fraunces sits well at 400/500, Manrope at 400/500/600/700 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing scale (4pt base) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Section rhythm — compressed ~30% from the original editorial rhythm so
     the page scrolls faster. Dealers bounce before they scroll to pricing. */
  --section-y: clamp(2.75rem, 5vw, 5.5rem);
  --section-y-sm: clamp(1.75rem, 3.25vw, 3.5rem);
  --section-y-lg: clamp(4rem, 8vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Containers ---------- */
  --container-prose: 42.5rem;     /* 680px — max for reading */
  --container-narrow: 55rem;       /* 880px */
  --container-standard: 73.75rem;  /* 1180px */
  --container-wide: 90rem;         /* 1440px */

  /* ---------- Borders & radii ---------- */
  --rule-width: 1px;
  --rule-thick: 2px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-pill: 999px; /* reserved — avoid by default */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---------- Z-index ---------- */
  --z-nav: 50;
  --z-overlay: 100;
}

/* ---------- Breakpoints (reference) ----------
   Use as @media (min-width: 40em) / (min-width: 48em) etc.
   --bp-sm:  40rem  (640px)
   --bp-md:  48rem  (768px)
   --bp-lg:  64rem  (1024px)
   --bp-xl:  80rem  (1280px)
   ---------------------------------------------- */