/* =============================================================
   HIT AND RUN: MUSICAL IMPROV — Colors & Type
   --------------------------------------------------------------
   Palette direction: "Stax" — 70s soul record sleeve, warm and
   muted. Oxblood / burnt sienna / mustard / forest / navy on bone.
   The original bright RGBYG primaries have been re-toned across
   the board; variable NAMES are preserved so all components
   cascade onto the new tones automatically.
   ============================================================= */

/* ---------- FONT FACES (Avant Garde) ----------------------- */
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-BookOblique.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-MediumOblique.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-Demi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-DemiOblique.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/AvantGarde-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Condensed cuts for poster lockups & narrow columns */
@font-face {
  font-family: "Avant Garde Cond";
  src: url("../fonts/AvantGarde-BookCond.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde Cond";
  src: url("../fonts/AvantGarde-MediumCond.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde Cond";
  src: url("../fonts/AvantGarde-DemiCond.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avant Garde Cond";
  src: url("../fonts/AvantGarde-BoldCond.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Body / UI typeface — Open Sans from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

/* =============================================================
   :root  — CORE BRAND TOKENS  (Stax palette)
   ============================================================= */
:root {
  /* ---------- Core palette (re-toned for the muted Stax system) ----------
     Variable NAMES preserve their roles (red = action, yellow = spotlight,
     etc.) but their VALUES are now the muted Stax-soul versions. */
  --hnr-red:        #7A2E2E;   /* oxblood — action color, was #FF0000 */
  --hnr-orange:     #B5532E;   /* burnt sienna, was #FF7F00 */
  --hnr-yellow:     #C99A3C;   /* mustard — spotlight color, was #FFFF00 */
  --hnr-green:      #3B5A3E;   /* forest, was #006B33 */
  --hnr-blue:       #1F2A48;   /* navy — secondary/focus, was #0000FF */
  --hnr-black:      #000000;   /* true black — used sparingly */
  --hnr-white:      #FFFFFF;
  --hnr-navy:       #11182B;   /* deep navy shadow */
  --hnr-crimson:    #3E1818;   /* dark oxblood shadow */
  --hnr-olive:      #65501F;   /* dark mustard shadow */

  /* ---------- Readable aliases ----------
     New code should prefer these — they say what they are. */
  --hnr-oxblood:    var(--hnr-red);
  --hnr-sienna:     var(--hnr-orange);
  --hnr-mustard:    var(--hnr-yellow);
  --hnr-forest:     var(--hnr-green);
  --hnr-bone:       #F2EAD8;       /* default page surface */
  --hnr-ink:        #1A1612;       /* warm black — the brand "stage" black */

  /* ---------- "Muted" / "curtain" companions ----------
     Retained as aliases for backwards compatibility. The whole palette
     is now muted, so the previous bright-vs-muted duality is retired —
     reach for the tonal scales (e.g. --red-400) when you need a softer
     wash of a brand color. */
  --hnr-red-muted:    var(--red-400);     /* #A55150 */
  --hnr-orange-muted: var(--orange-400);  /* #C66838 */
  --hnr-yellow-muted: var(--yellow-400);  /* #D0A040 */
  --hnr-green-muted:  var(--green-400);   /* #4E7E54 */
  --hnr-blue-muted:   var(--blue-400);    /* #4F6184 */
  --hnr-cream:        var(--hnr-bone);    /* legacy alias */

  /* ---------- Red scale (oxblood family) ---------- */
  --red-50:  #F6ECEB;
  --red-100: #ECD5D3;
  --red-200: #D8A8A4;
  --red-300: #C07A75;
  --red-400: #A55150;
  --red-500: #7A2E2E;   /* brand — oxblood */
  --red-600: #672626;
  --red-700: #531F1F;
  --red-800: #3E1818;   /* crimson shadow */
  --red-900: #2A1010;
  --red-950: #170707;

  /* ---------- Yellow scale (mustard family) ---------- */
  --yellow-50:  #FBF4E2;
  --yellow-100: #F4E1B5;
  --yellow-200: #E8C77F;
  --yellow-300: #DAAC52;
  --yellow-400: #D0A040;
  --yellow-500: #C99A3C;   /* brand — mustard */
  --yellow-600: #AB8330;
  --yellow-700: #876727;
  --yellow-800: #65501F;   /* olive shadow */
  --yellow-900: #443615;
  --yellow-950: #241D0C;

  /* ---------- Orange scale (burnt sienna family) ---------- */
  --orange-50:  #FAEEE5;
  --orange-100: #F3D6C2;
  --orange-200: #E7AC8A;
  --orange-300: #D88456;
  --orange-400: #C66838;
  --orange-500: #B5532E;   /* brand — sienna */
  --orange-600: #984325;
  --orange-700: #7B361E;
  --orange-800: #5C2716;
  --orange-900: #3D1A0F;
  --orange-950: #200D08;

  /* ---------- Green scale (forest family) ---------- */
  --green-50:  #EBF1EB;
  --green-100: #CFE0D0;
  --green-200: #9CBE9F;
  --green-300: #6F9C75;
  --green-400: #4E7E54;
  --green-500: #3B5A3E;   /* brand — forest */
  --green-600: #314C34;
  --green-700: #283D29;
  --green-800: #1F2E20;
  --green-900: #161F17;
  --green-950: #0B100C;

  /* ---------- Blue scale (navy family) ---------- */
  --blue-50:  #EFF1F7;
  --blue-100: #D6DBE9;
  --blue-200: #ADB7CF;
  --blue-300: #8493B5;
  --blue-400: #4F6184;
  --blue-500: #1F2A48;   /* brand — navy */
  --blue-600: #1A2440;
  --blue-700: #151E36;
  --blue-800: #11182B;   /* deep navy shadow */
  --blue-900: #0B111E;
  --blue-950: #060810;

  /* ---------- Neutral scale (warm — bone through warm-black) ---------- */
  --ink-0:   #FFFFFF;
  --ink-50:  #F2EAD8;   /* bone — default page surface */
  --ink-100: #E7DCC4;
  --ink-200: #D0C2A4;
  --ink-300: #A99A7C;
  --ink-400: #7D6F58;
  --ink-500: #564B3D;
  --ink-600: #3B332B;
  --ink-700: #2A241E;
  --ink-800: #221D18;
  --ink-900: #1A1612;   /* warm black — the brand "stage" black */
  --ink-1000:#000000;

  /* ---------- Type families ---------- */
  --font-display: "Avant Garde", "ITC Avant Garde Gothic", "Avant Garde Cond", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-display-cond: "Avant Garde Cond", "Avant Garde", "Futura", "Century Gothic", sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* ---------- Type scale (rem-based, 1rem = 16px) ---------- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  4rem;      /* 64px */
  --text-hero: 6rem;      /* 96px */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.75;

  /* Letter spacing — Avant Garde gets a tiny boost in caps */
  --ls-tight:  -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-display: 0.06em;   /* for HIT AND RUN-style ALL CAPS lockups */

  /* Weights */
  --fw-light: 200;
  --fw-book: 400;
  --fw-medium: 500;
  --fw-demi: 600;
  --fw-bold: 700;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Layout ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --gutter: var(--space-6);
  --gutter-mobile: var(--space-4);

  /* ---------- Radius ---------- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px;
  --border-1: 2px;
  --border-2: 3px;
  --border-3: 4px;
  --border-heavy: 6px;

  /* ---------- Shadows (light mode default) ----------
     HNR is theatrical — shadows are slightly punchier than typical UI.
     Now shaded toward warm-black instead of neutral grey. */
  --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.10), 0 1px 1px rgba(26, 22, 18, 0.06);
  --shadow-md: 0 4px 8px rgba(26, 22, 18, 0.14), 0 2px 4px rgba(26, 22, 18, 0.08);
  --shadow-lg: 0 12px 24px rgba(26, 22, 18, 0.18), 0 4px 8px rgba(26, 22, 18, 0.10);
  --shadow-xl: 0 24px 48px rgba(26, 22, 18, 0.24), 0 8px 16px rgba(26, 22, 18, 0.12);
  /* Signature stage-light glow — mustard halo for hero callouts */
  --shadow-spot: 0 0 64px rgba(201, 154, 60, 0.45), 0 12px 24px rgba(26, 22, 18, 0.28);
  /* Hard offset poster shadow (warm-black, not pure black) */
  --shadow-poster: 6px 6px 0 var(--ink-900);

  /* ---------- Overlay / scrim ---------- */
  --scrim-soft: rgba(26, 22, 18, 0.40);
  --scrim-strong: rgba(26, 22, 18, 0.74);
  --backdrop-blur: blur(14px);

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --duration-curtain: 600ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 0.6);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   SEMANTIC TOKENS — LIGHT MODE (default)
   ============================================================= */
:root,
[data-theme="light"] {
  /* Surfaces */
  --color-background:       var(--ink-50);
  --color-surface:          var(--hnr-white);
  --color-surface-elevated: var(--hnr-white);
  --color-surface-inverse:  var(--ink-900);

  /* Text */
  --color-text-primary:     var(--ink-900);
  --color-text-secondary:   var(--ink-600);
  --color-text-tertiary:    var(--ink-500);
  --color-text-on-primary:  var(--hnr-bone);  /* bone on oxblood */
  --color-text-on-yellow:   var(--ink-900);    /* warm-black sits on mustard */
  --color-text-on-dark:     var(--hnr-bone);   /* bone on stage-black */
  --color-text-link:        var(--hnr-red);    /* oxblood */
  --color-text-link-hover:  var(--red-700);

  /* Roles */
  --color-primary:          var(--hnr-red);    /* oxblood */
  --color-primary-hover:    var(--red-600);
  --color-primary-active:   var(--red-700);
  --color-secondary:        var(--hnr-blue);   /* navy */
  --color-secondary-hover:  var(--blue-700);
  --color-accent:           var(--hnr-yellow); /* mustard */
  --color-accent-hover:     var(--yellow-600);

  /* Borders & dividers */
  --color-border:           var(--ink-200);
  --color-border-strong:    var(--ink-700);
  --color-divider:          var(--ink-100);

  /* Interactive */
  --color-interactive:        var(--hnr-red);
  --color-interactive-hover:  var(--red-600);
  --color-interactive-active: var(--red-800);
  /* Focus ring — sienna so it stands out on bone (navy is too low-luminance) */
  --color-focus-ring:         var(--hnr-orange);

  /* Status */
  --color-success: var(--green-500);
  --color-warning: var(--orange-500);
  --color-error:   var(--red-500);
  --color-info:    var(--blue-400);
}

/* =============================================================
   SEMANTIC TOKENS — DARK MODE
   ============================================================= */
[data-theme="dark"] {
  --color-background:       var(--ink-900);
  --color-surface:          var(--ink-800);
  --color-surface-elevated: var(--ink-700);
  --color-surface-inverse:  var(--hnr-white);

  --color-text-primary:     var(--ink-50);     /* bone */
  --color-text-secondary:   var(--ink-300);
  --color-text-tertiary:    var(--ink-400);
  --color-text-on-primary:  var(--hnr-bone);
  --color-text-on-yellow:   var(--ink-900);
  --color-text-on-dark:     var(--hnr-bone);
  --color-text-link:        var(--yellow-300);
  --color-text-link-hover:  var(--hnr-yellow);

  --color-primary:          var(--red-400);
  --color-primary-hover:    var(--red-300);
  --color-primary-active:   var(--red-500);
  --color-secondary:        var(--blue-300);
  --color-secondary-hover:  var(--blue-200);
  --color-accent:           var(--hnr-yellow);
  --color-accent-hover:     var(--yellow-300);

  --color-border:           var(--ink-700);
  --color-border-strong:    var(--ink-300);
  --color-divider:          var(--ink-800);

  --color-interactive:        var(--red-400);
  --color-interactive-hover:  var(--red-300);
  --color-interactive-active: var(--red-500);
  --color-focus-ring:         var(--yellow-300);

  --color-success: var(--green-400);
  --color-warning: var(--orange-400);
  --color-error:   var(--red-400);
  --color-info:    var(--blue-300);

  /* Punchier shadows for dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.65), 0 4px 8px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.75), 0 8px 16px rgba(0, 0, 0, 0.50);
}

/* =============================================================
   BASE ELEMENTS
   ============================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background: var(--color-background);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings — Avant Garde, ALL CAPS by default like the wordmark */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-hero));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-text-primary);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-demi);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-demi);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}
h6, .h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-normal); }
.lead { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--color-text-secondary); }
small, .caption { font-size: var(--text-sm); color: var(--color-text-secondary); }
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-demi);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--hnr-red);
}
code, kbd, pre { font-family: var(--font-mono); font-size: 0.95em; }

a {
  color: var(--color-text-link);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-text-link-hover); }

::selection { background: var(--hnr-yellow); color: var(--ink-900); }

/* =============================================================
   SIGNATURE BRAND STRIPES — oxblood / sienna / mustard / forest
   The 4-bar stripe is the brand's most reusable decorative element.
   Re-toned to match the muted Stax palette — same shape, dustier hues.
   `.hnr-tricolor` is kept as an alias for backwards compatibility.
   ============================================================= */
.hnr-stripes,
.hnr-tricolor {
  display: block;
  height: 18px;
  background: linear-gradient(
    to bottom,
    var(--hnr-red)    0    25%,
    var(--hnr-orange) 25%  50%,
    var(--hnr-yellow) 50%  75%,
    var(--hnr-green)  75% 100%
  );
}
.hnr-stripes--thin,
.hnr-tricolor--thin { height: 6px; }
.hnr-stripes--thick,
.hnr-tricolor--thick { height: 32px; }
.hnr-stripes--vertical,
.hnr-tricolor--vertical {
  height: auto;
  width: 18px;
  background: linear-gradient(
    to right,
    var(--hnr-red)    0    25%,
    var(--hnr-orange) 25%  50%,
    var(--hnr-yellow) 50%  75%,
    var(--hnr-green)  75% 100%
  );
}