/* ===========================================================================
   Pizza by the Guy — design tokens.

   Brand: the fire red of the logo (#D23D2D) leads everything. Saffron, vanilla
   cream and retro green come from the brand kit; espresso is the dark ground
   the official lockup was drawn for.

   Fonts are self-hosted (no third-party request, no layout shift waiting on
   Google): WinieBeige for display and BlackScript ("PBGScript") for the script
   accents are the brand kit's own; Oswald carries the Pizza-Ranch-style nav,
   labels and prices; DM Sans is the reading face. WinieBeige has no & $ % ? /
   ( ) — Lilita One sits next in the stack and supplies those glyphs in a
   matching bubble weight.
   =========================================================================== */

@font-face{font-family:"WinieBeige";src:url("../fonts/WinieBeigeWeb.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PBGScript";src:url("../fonts/PBGScript.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lilita One";src:url("../fonts/LilitaOne.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts/Oswald.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap}

:root{
  /* ------------------------------------------------------------- colour */
  --red:#D23D2D;            /* the logo red — white text on it is 4.7:1 */
  --red-hot:#E2483A;
  --red-deep:#A92A1C;       /* tiles, promo bar; red text on cream at 6:1 */
  --red-ink:#7C1D12;
  --red-wash:#FBE3DA;

  --saffron:#F5C065;
  --saffron-deep:#E9A93B;
  --saffron-light:#FFE6A6;  /* gold that still reads on the red: 3.9:1 (saffron is 2.8) */
  --cream:#F8EECB;          /* brand vanilla */
  --cream-2:#F2E2B4;
  --paper:#FFFAEE;
  --white:#FFFFFF;

  --green:#31603D;          /* brand retro green — the promo artwork's ground */
  --green-deep:#244A2E;
  --green-pale:#DCE8CF;

  --ink:#2A1A14;            /* espresso */
  --ink-2:#3A251E;
  --ink-3:#4D3329;

  --text:#2E1E18;
  --muted:#6E433D;          /* brand russet — 7:1 on cream */
  --line:rgba(110,67,61,.18);
  --line-strong:rgba(110,67,61,.32);
  --on-dark:#FFF6E3;
  --on-dark-2:rgba(255,246,227,.78);

  /* --------------------------------------------------------------- type */
  --font-display:"WinieBeige","Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;
  --font-script:"PBGScript","Brush Script MT",cursive;
  --font-cond:"Oswald","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --font-text:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-hero:clamp(2.75rem, 1.15rem + 4.7vw, 5.6rem);
  --fs-h1:clamp(2.6rem, 1.5rem + 3.4vw, 4.6rem);
  --fs-h2:clamp(2.05rem, 1.35rem + 2.2vw, 3.35rem);
  --fs-h3:clamp(1.3rem, 1.12rem + .55vw, 1.62rem);
  --fs-kicker:clamp(1.55rem, 1.2rem + 1.05vw, 2.25rem);
  --fs-lede:clamp(1.06rem, .98rem + .32vw, 1.26rem);
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-label:.8rem;
  --lh-display:.98;

  /* ------------------------------------------------------------- layout */
  --container:1240px;
  --gutter:clamp(16px, 4vw, 40px);
  --section-y:clamp(4rem, 2.5rem + 5vw, 7.25rem);
  --section-y-tight:clamp(3rem, 2rem + 3vw, 5rem);
  /* prefixed: Elementor resets a bare --gap to `initial` on every element */
  --pbg-gap:clamp(1rem, .6rem + 1.2vw, 1.75rem);
  --header-h:88px;
  --promo-h:40px;

  --r-xs:8px;
  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --pill:999px;

  --shadow-1:0 1px 2px rgba(42,26,20,.07), 0 10px 28px -14px rgba(42,26,20,.32);
  --shadow-2:0 2px 6px rgba(42,26,20,.08), 0 28px 60px -24px rgba(42,26,20,.45);
  --shadow-red:0 18px 40px -18px rgba(124,29,18,.6);

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* ----------------------------------------------------------- patterns */
  /* Drawn by tools/patterns.py. Each SVG carries its own tile size, so no
     rule sets a background-size a client's own background image could catch.
     Every pattern sits over a solid background-color. */
  --pat-grain:url("../img/pat-grain.svg");     /* fine film grain: light grounds */
  --pat-topo:url("../img/pat-topo.svg");       /* contour lines: the cream bands */
  --pat-doodle:url("../img/pat-doodle.svg");   /* ingredient line drawings: the red bands */
  --pat-waves:url("../img/pat-waves.svg");     /* flowing lines: the green band */
  --pat-grid:url("../img/pat-grid.svg");       /* dot grid: espresso */
  --glow-ink:radial-gradient(70% 90% at 100% 0%, rgba(210,61,45,.26), rgba(210,61,45,0) 70%);
  /* a band's soft lower edge, used as a mask */
  --edge-curve:url("../img/edge-curve.svg");
  --edge-h:clamp(18px, 3vw, 44px);
}