/* =============================================================
   DESIGN TOKENS — single source of truth (from BLUEPRINT.md)
   Swap accent/font here and it propagates everywhere.
   Accent: warm terracotta (approved). Neutrals: monochrome.
   ============================================================= */
:root {
  /* ---- type ---- */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* display */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* UI/body */

  /* small, restrained scale — largest heading 36px */
  --t-2xs: 0.5625rem;  /* 9  */
  --t-xs:  0.6875rem;  /* 11 */
  --t-sm:  0.75rem;    /* 12 */
  --t-md:  0.8125rem;  /* 13 */
  --t-base:0.875rem;   /* 14 — default UI */
  --t-body:1rem;       /* 16 */
  --t-lg:  1.125rem;   /* 18 */
  --t-xl:  1.375rem;   /* 22 */
  --t-2xl: 1.5rem;     /* 24 */
  --t-3xl: 1.75rem;    /* 28 */
  --t-4xl: 2.25rem;    /* 36 */
  --t-hero: clamp(2.5rem, 5vw, 4.25rem); /* editorial hero display */

  --w-light: 300; --w-reg: 400; --w-bold: 700;
  --track-label: 0.14em;  /* labels, eyebrows, buttons */
  --track-wide: 0.22em;
  --lh-tight: 1.05; --lh: 1.55;

  /* ---- color: monochrome neutrals + one warm accent ---- */
  --accent: #b87253;            /* terracotta */
  --accent-dark: #854d34;
  --accent-container: #fff6f2;
  --on-accent: #ffffff;

  --ink: rgba(0,0,0,0.87);      /* body text */
  --ink-muted: rgba(0,0,0,0.6);
  --ink-faint: rgba(0,0,0,0.4);
  --line: rgba(0,0,0,0.12);     /* hairlines */
  --bar: #2d2d2d;               /* dark utility bar */
  --surface: #ffffff;
  --surface-2: #f5f5f5;         /* skeleton / section wash */
  --breadcrumb: #f4f4f4;

  --grey-100:#f5f5f5; --grey-300:#cccccc; --grey-500:#a3a3a3;
  --grey-700:#525252; --grey-900:#2d2d2d;

  --error:#cb202d; --success:#468941;

  /* ---- spacing (4px base) ---- */
  --sp: 4px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 50px; --sp-10: 70px;

  --container: 1180px;
  --pad-x: 16px;                /* mobile */
  --section-y: 40px;

  /* ---- radii (mostly sharp) ---- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-full: 9999px;

  /* ---- motion (slow, restrained) ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;   /* default */
  --t-mid: 0.3s;     /* interactions */
  --t-color: 0.4s;   /* color shifts */
  --t-slow: 0.5s;    /* reveals / accordions */

  --z-header: 30; --z-drawer: 90; --z-overlay: 80;
}

@media (min-width: 768px) {
  :root { --pad-x: 24px; }
}