/* ==========================================================================
   MODOM — Design Tokens (ATELIER design language)
   Warm "paper" editorial palette, Newsreader/Manrope/Cormorant type.
   Old --color-* names kept as back-compat aliases so the retained
   cinematic hero and shared components keep working.
   ========================================================================== */

:root {
  /* --- ATELIER palette (DESIGN.md) ----------------------------------------- */
  --paper: #f5f0e9;          /* warm page background */
  --ink: #171411;            /* primary text / dark UI */
  --ink-soft: #2c2722;       /* nav links, secondary dark */
  --muted: #7d7267;          /* secondary text / labels */
  --taupe: #a67b4f;          /* decorative accent */
  --accent: #9a744d;         /* labels, icons, links */
  --accent-ink: #98704a;     /* link hover */
  --panel: #eee5da;          /* elevated cards / blocks */
  --panel-2: #f7f1e9;        /* inner tiles */
  --border: #d8c9b8;         /* panel borders */
  --border-soft: #e2d5c8;
  --line-warm: #d8cdc1;      /* dividers */
  --white: #ffffff;

  /* --- Semantic ------------------------------------------------------------ */
  --bg: var(--paper);
  --surface: var(--panel);
  --text: var(--ink);
  --text-soft: #3a332d;      /* body copy */
  --text-muted: var(--muted);
  --label: var(--accent);
  --link: var(--accent);
  --link-hover: var(--ink);
  --line: var(--border);
  --focus-ring: var(--accent);

  /* --- Back-compat aliases (retained hero + shared components) ------------- */
  --color-ink: var(--ink);
  --color-cream: var(--paper);
  --color-cream-70: rgba(245, 240, 233, 0.72);
  --color-cream-60: rgba(245, 240, 233, 0.6);
  --color-white: #ffffff;
  --color-sand: #e7ddd4;
  --color-brown: #2a201a;
  --color-copper: var(--accent);
  --color-copper-dark: #7a5836;
  --color-gold: var(--taupe);
  --color-ink-80: rgba(23, 20, 17, 0.8);
  --color-ink-60: rgba(23, 20, 17, 0.6);
  --accent-soft: var(--taupe);
  --accent-strong: var(--accent);
  --bg-alt: var(--panel);
  --bg-dark: var(--ink);
  --text-on-dark: var(--paper);
  --text-on-dark-muted: rgba(245, 240, 233, 0.72);
  --line-on-dark: rgba(214, 197, 178, 0.22);

  /* --- Typography (ATELIER) ------------------------------------------------ */
  --sans: "Manrope", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --logo: "Cormorant Garamond", Georgia, serif;
  --font-display: var(--serif);   /* headings → Newsreader */
  --font-body: var(--sans);       /* body, UI, forms → Manrope */

  /* Fluid display scale — Newsreader editorial: light, tight tracking/leading */
  --fs-display: clamp(3.25rem, 1.9rem + 6.6vw, 6.25rem);  /* hero/section headlines */
  --fs-h1: clamp(3rem, 1.9rem + 5.3vw, 5.5rem);
  --fs-h2: clamp(2.75rem, 1.8rem + 4.6vw, 5.25rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 1.1vw, 1.78rem);
  --fs-h4: clamp(1.06rem, 0.98rem + 0.4vw, 1.22rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.35vw, 1.22rem);
  --fs-body: clamp(1rem, 0.97rem + 0.18vw, 1.06rem);
  --fs-small: 0.86rem;
  --fs-label: 0.95rem;
  --fs-eyebrow: 0.95rem;

  --lh-display: 0.95;
  --lh-heading: 0.98;
  --lh-body: 1.72;

  --tracking-display: -0.055em;
  --tracking-tight: -0.025em;
  --tracking-logo: 0.2em;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- Spacing (8px rhythm) ------------------------------------------------- */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-128: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 6.5rem);
  --section-y-tight: clamp(2.75rem, 1.8rem + 4.5vw, 4.5rem);

  /* --- Layout -------------------------------------------------------------- */
  --container: 1510px;
  --container-narrow: 760px;
  --gutter: clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem);
  --edge-x: clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem);
  --header-h: 88px;

  /* --- Radius -------------------------------------------------------------- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;          /* buttons */
  --radius-lg: 1.15rem;
  --radius-panel: 1.25rem;    /* premium panels */
  --radius-pill: 999px;

  /* --- Elevation (warm) ---------------------------------------------------- */
  --shadow-sm: 0 8px 18px rgba(70, 54, 42, 0.06);
  --shadow-md: 0 24px 64px rgba(42, 31, 22, 0.13);
  --shadow-panel: 0 24px 64px rgba(42, 31, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --shadow-lg: 0 36px 92px rgba(49, 37, 28, 0.2);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.68);

  /* --- Motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 1200ms;        /* reveal-on-scroll */

  /* --- Z-index ------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky-cta: 40;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 1000;
}