/* ============================================================
   Col'Cacchio · Brand 2026 override layer
   Load AFTER _shared.css. Tokens only — layout, animation and
   feature CSS in _shared.css are untouched.
   Real Brilliant / Proxima Nova files (A01) slot in via the
   font stacks below; Jost & Mulish stand in until then.
   ============================================================ */

/* @font-face rules for Jost + Mulish live in fonts_face.css (inlined into
   the hashed _shared.css by generate.py). This file is tokens + overrides only. */

:root{
  --display:'Brilliant','Jost',sans-serif;
  --body:'Proxima Nova','Mulish',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  /* The mono accent (eyebrows, chips, hours, captions) retires with the
     rebrand: two brand faces only. The uppercase + tracking treatment stays. */
  --mono:'Proxima Nova','Mulish',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --cream:#FFFFFF;
  --cream-dark:#EFF3EF;
  --champagne:#E4EBE5;
  --terracotta:#35907F;
  --terracotta-dark:#2A7367;
  --terracotta-bright:#58B6A5;
  --basil:#35907F;
  --basil-dark:#26665C;
  --brand-basil:#130C0E;
  --aged-gold:#8A9C90;
  --olive:#8A9C90;
  --charcoal:#130C0E;
  --ink:#130C0E;
  --muted:#6D6869;
  --soft-border:#E1E6E2;
  --field-border:#A9B7AE;
  --cream-a1:rgba(255,255,255,0.92);
  --cream-a2:rgba(255,255,255,0.85);
  --cream-a3:rgba(255,255,255,0.75);
  --cream-a4:rgba(255,255,255,0.65);
  --cream-a5:rgba(255,255,255,0.55);
  --cream-a6:rgba(255,255,255,0.10);
  --header-veil:rgba(255,255,255,0.88);
  --sticky-veil:rgba(255,255,255,0.94);
  --filter-veil:rgba(255,255,255,0.94);
  /* Opaque: a 35% teal ring measured 1.3:1 against the surface it replaced
     (WCAG 1.4.11 asks 3:1 of a focus indicator). #35907F is 3.86:1 on white. */
  --focus-ring:#35907F;
  /* Accent word in a photo hero's headline (h1 em). The flat teal measured
     2.0-2.7:1 over the hero photography; this end of the teal ramp clears
     3:1 for display text on every hero photo, at 390 and 1440. */
  --accent-on-photo:#8AD1C4;
  --shadow-1:0 1px 2px rgba(19,12,14,0.05);
  --shadow-2:0 4px 10px rgba(19,12,14,0.07);
  --shadow-3:0 14px 32px rgba(19,12,14,0.09);
}
html[data-theme="dark"]{
  --cream:#130C0E;
  --cream-dark:#1C1517;
  --champagne:#241C1E;
  --terracotta:#58B6A5;
  --terracotta-dark:#7BC7B9;
  --terracotta-bright:#8AD1C4;
  --basil:#58B6A5;
  --basil-dark:#7BC7B9;
  --brand-basil:#B2C5BA;
  --aged-gold:#B2C5BA;
  --olive:#B2C5BA;
  --charcoal:#F4F6F4;
  --ink:#F4F6F4;
  --muted:#A9ABA9;
  --soft-border:#332B2D;
  --field-border:#5A5254;
  --header-veil:rgba(19,12,14,0.88);
  --sticky-veil:rgba(19,12,14,0.94);
  --filter-veil:rgba(28,21,23,0.94);
  --focus-ring:#58B6A5;
}
/* Brilliant is all caps, upright, bold — the Fraunces italic-300 voice retires */
h1,h2,h3,h4,h5,h6,.display{
  font-family:var(--display) !important;
  font-weight:700 !important;
  font-style:normal !important;
  text-transform:uppercase;
  letter-spacing:0.01em !important;
}
h1 em,h2 em,h3 em,h4 em,.display em,h1 i,h2 i,h3 i,.display i{
  font-style:normal !important;
  color:var(--terracotta);
}
/* The teal accent vanishes on the teal Vitality band (1.0:1 on /menu and
   /promos), and the sage stat numerals read at 1.3:1. Mint keeps the accent
   and clears 3:1 for display-size text; the band is a dark well, so dark
   mode resolves the same light palette. */
.vitality-band :is(h1,h2,h3,h4) :is(em,i),.vit-stat em{color:var(--champagne);}
/* Photo heroes: the teal accent word sits on the photograph, not on a flat
   surface (2.0:1 on /contact, 2.1:1 on /promos at 1440). Both themes: the
   photo and its scrim do not change with the theme. */
.hero:not(.surface-clean):has(.hero-image) h1 :is(em,i){color:var(--accent-on-photo);}
.lede,.lede em{font-family:var(--body) !important;font-style:normal !important;}
/* Display-face accents that still carried the Fraunces italic-300 voice
   (Jost has no italic, so these were rendering as a synthesised oblique). */
.logo,.logo em,.wordmark,.dish-band .band-initial,.process-step .process-num,.step .step-num,
.numeral-display,.numeral-display em,.vit-stat em,body.demo-mode .demo-panel-list .num,
.menu-row :is(h3,h4,h5){font-family:var(--display) !important;font-style:normal !important;font-weight:700 !important;}
.logo,.wordmark{text-transform:uppercase;letter-spacing:0.02em !important;}
/* The rest of the old italic voice the 1 Sep pass missed: every /menu row,
   the stat numerals (home, about, go, press, stores, catering), the ticket
   wordmark accent on the offer / voucher / booking cards and the 404 code.
   Upright only; weights and sizes stay with each component. */
.menu-card-title,.menu-card-name,.stat-quad .num,.stat-quad .num :is(em,span),
.stat-trio .num,.stat-trio .num em,.trust-stat .num em,.stat-row strong,
.brand-card--padded em,.step .step-num,.not-found .code,.not-found .code span{font-style:normal !important;}
.menu-card-title{font-weight:500;}
/* Editorial quotes + the home store ribbon read in the body face, like .lede */
.pullquote,.store-marquee-item{font-family:var(--body) !important;font-style:normal !important;font-weight:600;}
/* Tabular figures now that the mono face is gone from hours + counters */
.store-hours,.numeral-display,.promo-countdown,.trust-stat .num,.stat-quad .num,.stat-trio .num{font-variant-numeric:tabular-nums;}
/* Dark wells re-branded: _shared.css restores the ORIGINAL light palette on
   components that stay dark in both themes, and those element-scoped rules
   beat this file's html[data-theme="dark"] root remap. Re-restore the same
   wells with the 2026 light palette so dark-mode CTAs / footer links go teal
   with the rest of the page. KEEP THIS SELECTOR LIST IN SYNC with the dark
   wells block in src/generate.py:SHARED_CSS. */
html[data-theme="dark"] :is(.surface-ink, .topstrip, .site-footer, .newsletter,
  .promo-tile.feature, .spec-strip, .vit-calc, .vitality-band,
  .hero:not(.surface-clean), .back-to-top, .demo-panel, .brand-card--padded,
  .go-kiss-banner, .consent-banner){
  --cream:#FFFFFF; --cream-dark:#EFF3EF; --champagne:#E4EBE5;
  --ink:#130C0E; --charcoal:#130C0E; --muted:#6D6869;
  --soft-border:#E1E6E2;
  --terracotta:#35907F; --terracotta-dark:#2A7367; --terracotta-bright:#58B6A5;
  --basil:#35907F; --basil-dark:#26665C; --aged-gold:#8A9C90;
}
/* WCAG 1.4.3 (Codex review, PR #197): the flat brand teal #35907F is only
   3.86:1 against white — under 4.5:1 for the small text it carries on
   .btn-primary (white on teal), .chip.active and hovered chips, and the
   active menu segment (teal on white). Step just these CONTROL STATES down
   the ramp (#2A7367 = 5.6:1 rest, #26665C = 6.7:1 hover); the accent teal
   stays #35907F everywhere else (display-size em text, borders, icons). */
.btn-primary, .header-voucher, .chip.active, .chip:hover,
.segments .segment.is-active{
  --terracotta:#2A7367; --terracotta-dark:#26665C;
}
/* Dark mode pairs these controls with dark text on the remapped mint
   (7.7:1+), so restore the mint ramp there… */
html[data-theme="dark"] :is(.btn-primary, .header-voucher, .chip.active, .chip:hover,
  .segments .segment.is-active){
  --terracotta:#58B6A5; --terracotta-dark:#7BC7B9;
}
/* …except inside dark wells, where the light palette (white text) is
   restored and the darker teal is needed again. */
html[data-theme="dark"] :is(.surface-ink, .topstrip, .site-footer, .newsletter,
  .promo-tile.feature, .spec-strip, .vit-calc, .vitality-band,
  .hero:not(.surface-clean), .back-to-top, .demo-panel, .brand-card--padded,
  .go-kiss-banner, .consent-banner) :is(.btn-primary, .header-voucher, .chip.active, .chip:hover,
  .segments .segment.is-active){
  --terracotta:#2A7367; --terracotta-dark:#26665C;
}
/* The 2026 brand-card marks (CC monogram + GO icon) are black-on-transparent
   PNGs/SVGs; .brand-card is NOT a dark well, so in dark mode its surface goes
   near-black and a black mark loses contrast. Inverting the monochrome mark
   yields the white counterpart — same move as the header wordmark swap. */
html[data-theme="dark"] .brand-card .brand-mark{filter:invert(1);}