/* Self-hosted brand fonts (Oswald + Open Sans) — no Google Fonts CDN:
   tighter CSP (no fonts.googleapis/gstatic), no third-party visitor-IP leak. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/open-sans-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/open-sans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/open-sans-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/open-sans-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/open-sans-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/open-sans-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/oswald-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/oswald-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/oswald-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/oswald-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/oswald-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/oswald-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================
   Barn Burner BBQ & Car Show — Design Tokens
   Captured from the live site: black + red (#dd3333) + white,
   Oswald (bold condensed headings) + Open Sans (body).
   ============================================ */

:root {
  color-scheme: light;

  /* Brand */
  --ink: #111111;          /* near-black — top nav, footer, dark bands */
  --ink-deep: #000000;
  --ink-deep-rgb: 0, 0, 0;
  --ink-raised: #1c1c1c;   /* raised surface on a black ground (action-page card) */
  --brand: #dd3333;        /* Barn Burner red — CTAs, accents, bands */
  --brand-rgb: 221, 51, 51;/* --brand channels, for rgba(var(--brand-rgb), a) */
  --brand-deep: #b82525;   /* hover / darker red */
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --cream: #f4f4f4;        /* light neutral — alt sections */
  --sand: #e6e6e6;         /* tint / dividers */
  --ink-rgb: 17, 17, 17;   /* --ink channels, for rgba(var(--ink-rgb), a) */

  /* Overlays & scrims — always built from the channels above, never raw rgba(),
     so a brand change propagates instead of leaving stragglers behind. */
  --scrim: rgba(var(--ink-rgb), 0.6);          /* lightbox controls */
  --scrim-deep: rgba(var(--ink-deep-rgb), 0.9);            /* lightbox backdrop */
  --wash-light: rgba(var(--white-rgb), 0.12);  /* ghost-button hover on dark */
  --hairline-on-dark: rgba(var(--white-rgb), 0.10);
  --hairline-faint: rgba(var(--white-rgb), 0.08);
  --border-on-dark: rgba(var(--white-rgb), 0.40);
  --border-on-dark-strong: rgba(var(--white-rgb), 0.60);
  --brand-wash: rgba(var(--brand-rgb), 0.08);  /* form-error background */
  --brand-veil: rgba(var(--brand-rgb), 0.90);  /* play-button disc over artwork */
  --focus-halo: 0 0 0 3px rgba(var(--brand-rgb), 0.30);

  /* Status (admin registry) — outside the three-colour brand on purpose, but named
     and centralised so no page invents its own green or amber. */
  --ok: #1a7f37;
  --ok-wash: #d7f0d9;
  --warn: #8a6d0b;
  --warn-wash: #fff2cc;
  --danger: var(--brand-deep);
  --danger-wash: #f0d7d7;
  --danger-border: #e3b4b4;

  /* Functional */
  --text-primary: #1a1a1a;
  --text-secondary: #5a5a5a;
  --text-light: #6a6a6a;         /* muted text on light bg (AA on white) */
  --text-on-dark: #f0f0f0;
  --text-on-dark-muted: #a0a0a0; /* fine print on dark bg (AA on #111) */
  --text-on-brand: #ffffff;
  --border: #e2e2e2;
  --border-light: #ededed;

  /* Typography */
  --font-heading: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.75rem;

  /* Fluid DISPLAY sizes — headings ramp continuously from phone to wide desktop
     instead of stepping at a breakpoint, so no viewport gets desktop-scale type
     next to a mobile nav. Bounds match the old fixed pairs exactly (h1 44→76px,
     h2 32→60px, h3 20→24px) and the rem term keeps browser zoom / user font-size
     working — never use a bare vw font-size. */
  --display-1: clamp(2.75rem, 2.046rem + 3.005vw, 4.75rem);
  --display-2: clamp(2rem, 1.384rem + 2.629vw, 3.75rem);
  --display-3: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);

  --leading-tight: 1.05;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Breakpoints — THE ONLY TWO. CSS cannot read custom properties inside a media
     query, so these are documentation, not machinery: the values live here and
     `scripts/qa-static.mjs` fails the build if any stylesheet uses a third.
       --bp-phone  640px  stacks multi-column blocks (forms, lists, galleries)
       --bp-lap    900px  swaps desktop nav → burger, tables → cards, side-by-sides → stacked
     Type does NOT step at a breakpoint any more — see the fluid display scale. */
  --bp-phone: 640px;
  --bp-lap: 900px;

  /* Layout */
  --max-width: 1140px;
  --max-width-narrow: 820px;
  --max-width-wide: 1400px;

  /* Borders & Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.14);
  --shadow-lg: 0 10px 34px rgba(0,0,0,0.18);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}