/* Guide Them visual refresh: design tokens
   Companion to VISUAL-REFRESH.md section 1. Light is the default theme.
   Dark applies automatically when the device prefers dark. If the site already has a theme
   control, have it set data-theme="light" or data-theme="dark" on <html>; don't add one.
   Font files live at /fonts/ (companion/fonts). Preload only the two faces marked PRELOAD:
   <link rel="preload" href="/fonts/Barlow-Regular.latin.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/fonts/BarlowCondensed-ExtraBold.latin.woff2" as="font" type="font/woff2" crossorigin> */

/* ---------- Fonts: Barlow family, SIL Open Font License (fonts/OFL.txt) ---------- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/refresh/fonts/Barlow-Regular.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} /* PRELOAD */
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/refresh/fonts/Barlow-Italic.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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/refresh/fonts/Barlow-Medium.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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/refresh/fonts/Barlow-SemiBold.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:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/refresh/fonts/Barlow-Bold.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/refresh/fonts/BarlowCondensed-SemiBold.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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/refresh/fonts/BarlowCondensed-ExtraBold.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} /* PRELOAD */

/* Metric-matched fallbacks, so text barely moves when the web fonts arrive */
@font-face{font-family:'Barlow Fallback';font-weight:400 500;src:local('Arial'),local('ArialMT'),local('Roboto'),local('Roboto-Regular');size-adjust:94.4%;ascent-override:105.9%;descent-override:21.2%;line-gap-override:0%}
@font-face{font-family:'Barlow Fallback';font-weight:600 700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:90.6%;ascent-override:110.4%;descent-override:22.1%;line-gap-override:0%}
@font-face{font-family:'Barlow Condensed Fallback';font-weight:600 800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:76.7%;ascent-override:130.4%;descent-override:26.1%;line-gap-override:0%}

/* ---------- Tokens: light theme (default) ---------- */
:root{
  color-scheme:light;
  /* Brand constants, identical in both themes */
  --night:#0F1F1B; --marquee:#FFC53D; --marquee-hover:#FFB000; --marquee-active:#EBA400; --on-marquee:#0F1F1B;
  --cat-music:#FF6A3D; --cat-sports:#4C8DFF; --cat-comedy:#FFB0C8; --cat-community:#4CC38A; --cat-other:#B49CFF; --on-cat:#0F1F1B;
  --stub:#FFFFFF; --on-stub:#0F1F1B; --caution-fill:#FFC53D;
  /* Surfaces and text */
  --ground:#F1F4EF; --paper:#FFFFFF; --soft:#E3EAE5; --line:#C9D3CB; --line-strong:#6B7A74;
  --text:#0F1F1B; --muted:#4A5A54;
  --panel:#0F1F1B; --panel-text:#F1F4EF; --panel-muted:#A9B8B1; --panel-line:rgb(255 255 255 / .16);
  --chrome:#0F1F1B; --chrome-text:#F1F4EF; --chrome-line:transparent;
  /* Status */
  --go:#176E47; --on-go:#FFFFFF; --stop:#B02E25; --caution:#805300;
  /* Focus and current-state indicators */
  --focus:#0F1F1B; --indicator:#0F1F1B;
  /* Type */
  --font-body:'Barlow','Barlow Fallback','Helvetica Neue',Arial,sans-serif;
  --font-display:'Barlow Condensed','Barlow Condensed Fallback','Arial Narrow',Arial,sans-serif;
  --fs-display-1:clamp(2.9rem,12vw,4.6rem); --lh-display-1:.9;
  --fs-display-2:clamp(2.3rem,10vw,3.6rem); --lh-display-2:.92;
  --fs-h2:1.9rem; --fs-pick:2.05rem; --fs-group:1.65rem; --fs-h3-display:1.55rem; --fs-time:1.4rem;
  --fs-h3:1.125rem; --fs-quote:1.2rem; --fs-body:1.0625rem; --lh-body:1.5; --lh-long:1.6;
  --fs-body-sm:.9375rem; --fs-fine:.875rem; --fs-label:.8125rem;
  /* Space (px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;
  /* Layout */
  --container:75rem; --col-main:47.5rem; --rail-event:22.5rem; --rail-venue:16.25rem; --rail-plan:21.25rem;
  --measure:62ch; --measure-long:68ch; --gutter:20px; --tap:44px;
  /* Shape */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --bw-1:1px; --bw-2:1.5px; --bw-3:2px; --bw-4:2.5px;
  --shadow-pick:5px 5px 0 var(--marquee);
  /* Motion */
  --dur-1:150ms; --dur-2:200ms; --ease:cubic-bezier(.2,.7,.3,1);
}
@media (min-width:600px){:root{--gutter:32px}}
@media (min-width:1024px){:root{--gutter:40px;--fs-h2:2.25rem}}

/* ---------- Tokens: dark theme ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0B1512; --paper:#13221E; --soft:#1B2E29; --line:#2A3D37; --line-strong:#6E8279;
    --text:#E8EFE9; --muted:#A9B8B1;
    --panel:#1E3530; --panel-text:#F1F4EF; --panel-muted:#A9B8B1; --panel-line:rgb(255 255 255 / .14);
    --chrome:#13221E; --chrome-text:#F1F4EF; --chrome-line:#2A3D37;
    --go:#3FBF85; --on-go:#0B1512; --stop:#FF6B5E; --caution:#FFC53D;
    --focus:#FFC53D; --indicator:#FFC53D;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0B1512; --paper:#13221E; --soft:#1B2E29; --line:#2A3D37; --line-strong:#6E8279;
  --text:#E8EFE9; --muted:#A9B8B1;
  --panel:#1E3530; --panel-text:#F1F4EF; --panel-muted:#A9B8B1; --panel-line:rgb(255 255 255 / .14);
  --chrome:#13221E; --chrome-text:#F1F4EF; --chrome-line:#2A3D37;
  --go:#3FBF85; --on-go:#0B1512; --stop:#FF6B5E; --caution:#FFC53D;
  --focus:#FFC53D; --indicator:#FFC53D;
}

/* ---------- Surface overrides (set on the component, not on :root) ---------- */
.site-header,.site-footer,.sign,.pick{--focus:var(--marquee)}
.poster{--focus:var(--night)}                        /* category color background in both themes */
.stub{--stop:#B02E25;--caution:#805300;--muted:#4A5A54;--go:#176E47}  /* the stub is always white paper */