/* ===========================================================================
   Draft Line Solutions — design tokens

   Palette: the logo's navy (#2A2E7C) and lager gold (#FEC22B), taken down to
   a stout navy-black for the dark bands, and foam — warm white — for the light
   ones. Steel greys for the hardware, amber for beer in a glass.
   Type: Barlow Condensed for display (spec-sheet, industrial, all business),
   Jost for reading (the current site's face), IBM Plex Mono for the technical
   labels — temperatures, intervals, the kickers.

   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 */
  --stout:#0F1133;        /* the darkest band: a pint of stout */
  --stout-2:#151845;
  --navy:#2A2E7C;         /* the logo */
  --navy-2:#23276B;
  --navy-hi:#3B40A0;
  --gold:#FEC22B;         /* the logo's lager gold */
  --gold-hi:#FFD566;
  --gold-lo:#E2A40B;
  --gold-ink:#8A5C00;     /* gold that reads on white (AA for labels) */
  --amber:#E89A1C;
  --foam:#FBF7EE;
  --foam-2:#F3ECDC;
  --paper:#FFFFFF;
  --mist:#EEF0F8;
  --steel:#C6CBDA;
  --white:#FFFFFF;

  --text:#1B1D3A;
  --text-2:#40446A;
  --muted:#5D6184;
  --on-dark:#ECEDF8;
  --on-dark-2:#BEC1DE;
  --on-dark-3:#9599C2;

  --line:rgba(27,29,58,.12);
  --line-strong:rgba(27,29,58,.26);
  --line-dark:rgba(198,203,236,.16);
  --line-dark-strong:rgba(198,203,236,.34);
  --line-gold:rgba(254,194,43,.4);

  /* ------------------------------------------------------------------ type */
  --font-display:"Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-text:"Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-body:clamp(1rem, .97rem + .16vw, 1.0625rem);
  --fs-small:.9rem;
  --fs-lede:clamp(1.12rem, 1.02rem + .45vw, 1.36rem);
  --fs-kicker:.74rem;
  --fs-h3:clamp(1.45rem, 1.3rem + .6vw, 1.85rem);
  --fs-h2:clamp(2.3rem, 1.6rem + 2.8vw, 4rem);
  --fs-h1:clamp(2.7rem, 1.7rem + 4.2vw, 5.4rem);
  --fs-hero:clamp(2.6rem, 1rem + 4.3vw, 5.6rem);
  --lh-display:.98;

  /* ---------------------------------------------------------------- layout */
  --container:1240px;
  --narrow:880px;
  --gutter:clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --section-y:clamp(4.25rem, 2.8rem + 5vw, 8rem);
  --section-y-tight:clamp(3rem, 2.1rem + 3vw, 4.75rem);
  --dl-gap:clamp(1rem, .75rem + 1vw, 1.6rem);
  --topbar-h:40px;
  --header-h:84px;
  --chrome-h:calc(var(--topbar-h) + var(--header-h));

  --r-sm:4px;
  --r:10px;
  --r-lg:18px;
  --pill:999px;

  --shadow-1:0 1px 2px rgba(15,17,51,.06), 0 12px 28px -16px rgba(15,17,51,.28);
  --shadow-2:0 2px 6px rgba(15,17,51,.08), 0 34px 70px -32px rgba(15,17,51,.55);
  --shadow-gold:0 18px 40px -18px rgba(254,194,43,.55);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ------------------------------------------------------------ patterns */
  --grain:url("../img/grain.svg");
  --bubbles:url("../img/bubbles.svg");
  --foam-paper:url("../img/foam-paper.svg");
  --foam-cream:url("../img/foam-cream.svg");
  --foam-gold:url("../img/foam-gold.svg");
  /* the drafting grid: the company's name taken literally */
  --dl-grid-dark:linear-gradient(rgba(150,158,230,.075) 1px, transparent 1px) 0 0 / 32px 32px,
              linear-gradient(90deg, rgba(150,158,230,.075) 1px, transparent 1px) 0 0 / 32px 32px;
  --dl-grid-light:linear-gradient(rgba(42,46,124,.05) 1px, transparent 1px) 0 0 / 32px 32px,
               linear-gradient(90deg, rgba(42,46,124,.05) 1px, transparent 1px) 0 0 / 32px 32px;
  --glow-navy:radial-gradient(60% 70% at 85% 10%, rgba(59,64,160,.55), rgba(59,64,160,0) 70%);
  --glow-gold:radial-gradient(50% 60% at 10% 100%, rgba(254,194,43,.10), rgba(254,194,43,0) 70%);
}

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