/* ============================================================
   SAPORITALIA — DESIGN TOKENS
   Print-first identity translated to screen. One ink.
   Source: SAPORITALIA-DESIGN-SYSTEM.md
   ============================================================ */

:root {
  /* ---- Colour: one ink -------------------------------------
     All type + frame rules are the single oxblood ink.
     Hierarchy comes from SIZE and CASE, never colour.        */
  --ink: #570707;            /* primary ink — all type & rules */
  --ink-soft: #6d1512;       /* faint variant for hairlines only */

  --paper: #F8E8D0;          /* cream panel ground (base) */
  --paper-light: #FDF1E5;    /* cream highlight */
  --paper-shadow: #F2DFD0;   /* cream toward edges */
  --cartouche: #F3E0CF;      /* logo plaque cream */

  --marble: #3A0703;         /* marbled oxblood ground */
  --marble-dark: #2B0402;    /* deepest — ground base & photo backstop */
  --marble-light: #6B1810;

  /* ---- The oxblood ground ----------------------------------
     Built from gradients, never a repeated image. The source
     texture (assets/textures/marble-burgundy.png) is a 300×3000
     print border strip: it cannot tile without a hard vertical
     seam, so the mottling is drawn here instead. Percentage
     positions scale with the element, so there is no seam and no
     repeat at any width. Paint over --marble-dark.            */
  --ground-oxblood:
    radial-gradient(120% 85% at 12% 8%,  rgba(122, 30, 18, 0.50), transparent 58%),
    radial-gradient(100% 70% at 88% 16%, rgba(96, 20, 12, 0.40), transparent 60%),
    radial-gradient(130% 90% at 74% 94%, rgba(10, 1, 0, 0.55), transparent 62%),
    radial-gradient(90% 65% at 26% 80%,  rgba(138, 40, 26, 0.24), transparent 58%),
    radial-gradient(65% 50% at 52% 46%,  rgba(150, 52, 34, 0.12), transparent 66%),
    linear-gradient(168deg, rgba(255, 226, 200, 0.05) 0%, transparent 46%);

  /* Ornament palette — lives only inside placed artwork.
     Never set type or rules in these. Reference only.        */
  --orn-rose: #6F0B0A;
  --orn-rose-light: #913833;
  --orn-lemon: #C87711;
  --orn-lemon-light: #E8B21E;
  --orn-leaf: #242A02;

  /* ---- Type ------------------------------------------------ */
  --font-serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;

  /* Fluid type scale (min .. max via clamp) */
  --fs-hero: clamp(3rem, 8vw, 6.5rem);      /* wordmark / big display */
  --fs-h1: clamp(2.4rem, 5.5vw, 4rem);      /* section titles */
  --fs-h2: clamp(1.9rem, 4vw, 2.9rem);      /* panel headings */
  --fs-h3: clamp(1.4rem, 2.6vw, 1.9rem);
  --fs-lead: clamp(1.15rem, 1.8vw, 1.4rem); /* intros */
  --fs-body: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-item: clamp(1.1rem, 1.4vw, 1.28rem); /* menu item name/price */
  --fs-desc: clamp(0.95rem, 1.1vw, 1.08rem);/* italic descriptions */
  --fs-small: 0.85rem;
  --fs-tagline: clamp(2rem, 4.5vw, 3.4rem); /* Pinyon tagline */

  --lh-tight: 1.1;
  --lh-body: 1.6;

  --tracking-caps: 0.28em;   /* wide letterspacing for sub-labels / LONDON */
  --tracking-caps-sm: 0.18em;

  /* ---- Spacing (8pt-ish rhythm) ---------------------------- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  --maxw: 1240px;            /* content max width */
  --maxw-narrow: 820px;

  /* ---- Header ---------------------------------------------
     The cartouche drives the header's height, so anything that
     has to clear the fixed header (hero padding, breadcrumbs,
     the drawer) measures from --header-h rather than guessing.
     Keep --header-h = --logo-h + .header-inner padding-block.  */
  --logo-h: clamp(76px, 8.6vw, 118px);
  --header-h: calc(var(--logo-h) + 0.8rem);

  /* ---- Frame / panels ------------------------------------- */
  --frame-ink: #570707;
  --panel-radius: 3px;       /* corners are essentially square */
  --frame-inset: clamp(10px, 1.4vw, 18px);

  /* ---- Motion (kept minimal per print ethos) -------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.5s;

  --shadow-panel: 0 18px 50px rgba(0,0,0,0.32);
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.18);
}