/* ===========================================================================
   The Miller House — design tokens

   Palette: the logo's champagne gold on black and charcoal (the bar at
   night), claret and oxblood for accents, on cream paper; slate for the
   chalkboard.
   Type: Cinzel (the logo is set in Trajan; Cinzel is its open cousin) for
   display caps, Cormorant Garamond for the headlines and the bill of fare,
   Pinyon Script for the hand-lettered accents, Jost for reading; on the
   chalkboards, Fredericka the Great and Caveat.

   Never name a token after one of Elementor's own custom properties (--gap,
   --width, --container-*, --flex-* …): Elementor 4 resets those to `initial`
   on every element, and a theme token with the same name silently dies inside
   page content. build.py checks the list.
   =========================================================================== */

:root{
  /* ---------------------------------------------------------------- colour */
  --ink:#111213;          /* black: the night, the footer, the bar */
  --ink-2:#19191B;
  --walnut:#1E2022;       /* charcoal */
  --walnut-2:#2B2D30;
  --oxblood:#561417;
  --claret:#8A1E23;       /* the red of the old film's titles */
  --bourbon:#A9612A;
  --amber:#D08B45;        /* the glass held to the light */
  --gold:#D8C098;         /* the logo, sampled */
  --gold-hi:#ECDDBC;
  --gold-lo:#B8955C;
  --brass:#7E5F2F;        /* gold that reads on cream (AA for large text and labels) */
  --cream:#F4EDE1;
  --linen:#EBE1D0;
  --paper:#FBF8F2;
  --white:#FFFFFF;

  --text:#222120;
  --text-2:#4A4744;
  --muted:#696460;
  --on-dark:#EEE5D7;
  --on-dark-2:#CDBDA6;
  --on-dark-3:#A8967F;

  --line:rgba(34,33,32,.14);
  --line-strong:rgba(34,33,32,.3);
  --line-dark:rgba(216,192,152,.2);
  --line-dark-strong:rgba(216,192,152,.5);

  --slate:#283130;        /* the chalkboards behind the bar */
  --chalk:#F3EFE6;
  --chalk-y:#F2D98E;      /* yellow chalk */

  --open:#7FBF7A;
  --closed:#D9826A;

  /* ------------------------------------------------------------------ type */
  --font-display:"Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-serif:"Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-script:"Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --font-text:"Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-chalk:"Fredericka the Great", "Cinzel", Georgia, serif;           /* chalked capitals */
  --font-hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;             /* chalked handwriting */

  --fs-body:clamp(1rem, .97rem + .16vw, 1.0625rem);
  --fs-small:.9rem;
  --fs-lede:clamp(1.22rem, 1.06rem + .62vw, 1.55rem);
  --fs-kicker:.76rem;
  --fs-script:clamp(1.9rem, 1.45rem + 1.7vw, 2.9rem);
  --fs-h3:clamp(1.5rem, 1.32rem + .7vw, 1.95rem);
  --fs-h2:clamp(2.2rem, 1.5rem + 2.6vw, 3.7rem);
  --fs-h1:clamp(2.7rem, 1.65rem + 4.1vw, 5.3rem);
  --fs-hero:clamp(2.75rem, 1.15rem + 6.3vw, 7.1rem);
  --lh-display:1.02;

  /* ---------------------------------------------------------------- layout */
  --container:1240px;
  --narrow:880px;
  --gutter:clamp(1.15rem, .55rem + 2.4vw, 2.5rem);
  --section-y:clamp(4.5rem, 2.9rem + 5.4vw, 8.25rem);
  --section-y-tight:clamp(3rem, 2.1rem + 3vw, 4.75rem);
  --mh-gap:clamp(1.1rem, .8rem + 1vw, 1.75rem);
  --topbar-h:38px;
  --header-h:86px;
  --chrome-h:calc(var(--topbar-h) + var(--header-h));

  --r-sm:3px;
  --r:8px;
  --r-lg:16px;
  --pill:999px;

  --shadow-1:0 1px 2px rgba(17,17,18,.06), 0 10px 26px -14px rgba(17,17,18,.3);
  --shadow-2:0 2px 6px rgba(17,17,18,.08), 0 30px 64px -30px rgba(17,17,18,.6);
  --shadow-gold:0 0 0 1px rgba(216,192,152,.35), 0 18px 44px -22px rgba(0,0,0,.8);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ------------------------------------------------------------ patterns */
  --paper-laid:url("../img/paper-laid.svg");
  --grain:url("../img/grain.svg");
  --filigree:url("../img/filigree.png");
  --glow-amber:radial-gradient(60% 55% at 78% 30%, rgba(216,192,152,.07), rgba(216,192,152,0) 70%);
  --glow-gold:radial-gradient(70% 60% at 20% 15%, rgba(216,192,152,.07), rgba(216,192,152,0) 70%);
  --sky-dusk:linear-gradient(180deg, var(--cream) 0%, #ECE9E2 22%, #CFD6DC 40%, #9EAFC0 56%, #D9B49A 74%, #E8B488 82%, #6E5C63 92%, #26272D 97%, var(--ink) 100%);
}

@media (max-width:1024px){
  :root{ --header-h:72px; }
}
@media (max-width:767px){
  :root{ --topbar-h:0px; --header-h:66px; }
}