/* =========================================================
   TAVERNA SEVERO — BRAND TOKENS  ·  "Travertino & Terracotta"
   Sampled EXACTLY from the official arch logo:
     · terracotta-gold  #C19465   (TAVERNA / light arch stones)
     · taupe-brown      #726353   (SEVERO / dark arch stones)
   Plus derived espresso (text/outline) + warm cream paper.

   Direction: a LIGHT travertine base (cream paper, espresso ink,
   terracotta-gold accents) — true to a Roman trattoria + the
   logo's cream world — with ONE dramatic dark moment: the
   "walk through the arches" hero dollies from light stone into a
   warm, candle-lit interior (deep espresso + amber glow). Both the
   main site and the QR menu read on this system.

   Motion is GPU-only. Shadows are warm brown, never pure black.
   ========================================================= */

:root {

  /* =======================================================
     1) BRAND CORES  (exact sampled hex — do not alter)
     ======================================================= */
  --brand-terra:#C19465;     /* terracotta-gold · srgb(193,148,101) */
  --brand-brown:#726353;     /* taupe-brown     · srgb(114,99,83)   */

  /* =======================================================
     2) DERIVED RAMPS
     ======================================================= */
  /* TERRACOTTA-GOLD — 500 is the brand; 700/600 deepen for text on
     light, 400..200 lighten for accents/glints on dark */
  --terra-700:#825530;   /* deep terracotta — small accent text on cream (AA) */
  --terra-600:#9E703F;   /* button fill / pressed (AA white-on-fill) */
  --terra-500:#C19465;   /* === BRAND TERRACOTTA-GOLD === */
  --terra-400:#D2A878;   /* lit gold — accent text on dark interior (AA on espresso) */
  --terra-300:#DEBF9B;   /* warm glint / hairline gold */
  --terra-200:#ECD8BC;   /* faint warm wash */

  /* BROWN / ESPRESSO — the SEVERO taupe deepened into ink + dark surfaces */
  --brown-900:#241B14;   /* deepest espresso — dark interior bg (hero/footer) */
  --brown-800:#332618;   /* dark surface / card on dark */
  --brown-700:#3E2F25;   /* === ESPRESSO INK === text on cream (AAA) */
  --brown-600:#5C4A3A;   /* muted ink on cream (AAA) */
  --brown-500:#726353;   /* === BRAND TAUPE-BROWN === dividers, low-emphasis */
  --brown-400:#92826F;   /* faint label on cream */
  --brown-300:#B6A88F;   /* hairline taupe */

  /* WARM CREAM / TRAVERTINE — page + surfaces in the light sections */
  --cream-50:#FBF7EE;    /* raised light surface (cards on cream) */
  --cream-100:#EFE9DC;   /* === page background, light === */
  --cream-200:#E6DECC;   /* sunk panel / well on light */
  --cream-300:#D9CDB6;   /* stronger travertine divider on light */
  --cream-onDark:#EFE6D4;/* cream text on the dark interior (AAA) */

  /* OLIVE — SECONDARY ACCENT (Roman herbs / olives / cicoria).
     Breaks the warm-brown monotone. Desaturated to sit beside
     terracotta, never to fight it. AA-checked on cream + espresso. */
  --olive-700:#3F4A2C;   /* deep olive — accent text on cream (~10:1, AAA) */
  --olive-600:#566237;   /* olive fill — white-on-fill (~6.6:1, AA) */
  --olive-500:#6B7A45;   /* === BRAND OLIVE === borders, glints */
  --olive-400:#8A9A63;   /* lit olive — accent on dark interior (~5.8:1, AA) */
  --olive-300:#AFBC8E;   /* soft glint / hairline olive */
  --olive-wash:rgba(107,122,69,0.10); /* faint olive tint background */

  /* =======================================================
     3) SEMANTIC TOKENS  (prefer these in new code)
     ======================================================= */
  --bg-page:#EFE9DC;          /* default page bg — light travertine */
  --bg-deep:#241B14;          /* dark interior bg — hero depth, footer */
  --surface:#FBF7EE;          /* card / panel on light */
  --surface-sunk:#E6DECC;     /* sunk well on light */
  --surface-dark:#332618;     /* card / panel on the dark interior */
  --surface-dark-raised:#46362a;

  --text:#34271E;             /* body text on cream  (≈12:1 AAA) */
  --text-muted:#6E5C49;       /* muted text on cream (≈6.4:1 AA+) */
  --text-faint:#92826F;       /* low-emphasis label on cream */
  --text-on-dark:#EFE6D4;     /* body text on dark interior (AAA) */
  --text-muted-dark:#CDBC9F;  /* muted text on dark interior (AAA) */

  --accent:#C19465;           /* brand terracotta-gold — large display, fills, glints */
  --accent-strong:#9E703F;    /* deeper terracotta — AA white-on-fill (buttons) */
  --accent-deep:#825530;      /* deep terracotta — small accent text on cream (AA) */
  --accent-lit:#D2A878;       /* lit gold — accent text on dark interior (AA) */

  --accent-2:#6B7A45;          /* SECONDARY accent — olive (borders, glints) */
  --accent-2-strong:#566237;   /* olive fill — AA white-on-fill */
  --accent-2-deep:#3F4A2C;     /* deep olive — small accent text on cream (AA) */
  --accent-2-lit:#8A9A63;      /* lit olive — accent text on dark interior (AA) */
  --accent-2-wash:rgba(107,122,69,0.10); /* faint olive tint */

  --on-accent:#FFFFFF;        /* text on --accent-strong fills */
  --on-accent-ink:#241B14;    /* espresso text on bright --accent (the logo pairing) */

  --line:rgba(52,39,30,0.14);        /* hairline on light */
  --line-strong:rgba(52,39,30,0.24); /* stronger border on light */
  --line-dark:rgba(239,230,212,0.16);/* hairline on dark interior */
  --focus:#9E703F;
  --focus-ring:0 0 0 3px rgba(193,148,101,0.55);

  /* =======================================================
     4) DEPTH / CINEMATIC TOKENS  (warm-tinted, never pure black)
     ======================================================= */
  /* elevation — warm brown shadow, soft on cream */
  --elev-1:0 1px 2px rgba(52,39,30,0.10), 0 2px 8px rgba(52,39,30,0.07);
  --elev-2:0 8px 22px rgba(52,39,30,0.12), 0 3px 8px rgba(52,39,30,0.09);
  --elev-3:0 18px 44px rgba(40,28,20,0.16), 0 6px 16px rgba(40,28,20,0.10);
  --elev-4:0 34px 80px rgba(28,19,12,0.22), 0 12px 28px rgba(28,19,12,0.14);

  /* elevation on the dark interior — deeper warm shadow */
  --elev-dark-2:0 10px 28px rgba(0,0,0,0.40), 0 3px 10px rgba(0,0,0,0.30);
  --elev-dark-3:0 22px 56px rgba(0,0,0,0.50), 0 8px 18px rgba(0,0,0,0.34);

  /* ambient warm glow — candle-light bloom for the interior / CTA */
  --glow-warm:0 0 28px rgba(210,168,120,0.45), 0 0 64px rgba(193,148,101,0.26);
  --glow-soft:0 0 18px rgba(193,148,101,0.34);
  --glow-amber:rgba(214,156,92,0.55);  /* raw glow for gradients/filters */

  /* legibility scrim over imagery (keeps text AA) */
  --scrim:linear-gradient(180deg, rgba(28,19,12,0.10) 0%, transparent 28%, transparent 58%, rgba(20,13,8,0.78) 100%);
  --scrim-flat:rgba(20,13,8,0.55);
  --tint-glaze:rgba(193,148,101,0.10);

  /* =======================================================
     5) TYPE + LAYOUT
     ======================================================= */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --chalk:"Caveat","Bradley Hand","Segoe Print",cursive;
  --pad:clamp(18px,5vw,72px);
  --maxw:1200px;
  --ease:cubic-bezier(0.22,0.7,0.2,1);
}