/* ══════════════════════════════════════════════════════════════════════
   showbill.css — Nashville Venue Rentals visual direction, 2026-09-11.
   Chris: "make the site cooler, like more hip. do your best." → "just push it."

   Replaces navy + gold + Playfair (a hotel-ballroom brochure, and the same
   palette every wedding vendor in America uses) with a letterpress show-bill
   direction borrowed from Hatch Show Print, which has printed Nashville's
   posters since 1879: warm ink ground, bone type, one persimmon pass,
   condensed wood type set tight, square corners, heavy rules.

   HOW IT WORKS: app.css is Tailwind v4, so every colour utility compiles to
   `var(--color-<name>)`. Re-declaring those 18 variables after app.css
   re-skins all 668 pages without touching one line of markup. Radius is
   variable-driven too, so poster-square corners are a single block.

   ── WHY THIS IS AN INK GROUND AND NOT PAPER ────────────────────────────
   The first cut of this file was bone paper. It was pushed, measured, and
   pulled back within the hour. The site carries ~1,300 HARDCODED inline
   colours that no variable can reach: 182 × `color:#f5f0e8` and 74 × #e2d9c5
   (light text), 88 × `background:#0f1729` and 41 × #1a2035 (dark panels),
   249 × `color:#d4a843` (gold text). On a light ground that light text turns
   invisible and those panels become dark islands — a patchwork, worse than
   either design.

   So every swap here is dark→dark and light→light. Luminance is never
   inverted, which is what makes a blind re-skin of 668 live pages safe.
   **If you ever try a light theme again, those ~1,300 inline styles must be
   converted to classes FIRST.** Do not skip that.

   KILL SWITCH: delete the two <link> lines in includes/header.php.
   Backup: includes/header.php.bak-20260911-showbill
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Surfaces: navy → warm green-black ink. Still dark, no longer navy. */
  --color-navy-950:#0B0E0B;   /* deepest — also dark text on accent chips */
  --color-navy-900:#101410;   /* page ground */
  --color-navy-800:#191E18;   /* cards */
  --color-navy-700:#2B322A;   /* hairline rule */
  --color-navy-600:#3A4238;   /* heavier rule */
  --color-navy-500:#6E7A6C;   /* placeholder / disabled */

  /* ── Type: bone, warmer than the old cream ─────────────────────────── */
  --color-cream-50:#FBF8F0;
  --color-cream-100:#E8E5DA;  /* primary — stays light, so the 182 inline
                                 #f5f0e8 values still read correctly */
  --color-cream-200:#D8D3C4;
  --color-cream-300:#C2BCA9;

  /* ── Accent: gold → persimmon, the second ink pass ───────────────────
     2026-09-11 pm (Chris: "that orange is a little harsh"): softened from
     #E2632F/#F58A50 to terracotta #B85C38/#D0794E — same hue family, less
     saturation. Side benefit: bone text on the accent goes 3.5:1 → 4.5:1. */
  --color-gold-300:#D0794E;   /* hover / brighter pass */
  --color-gold-400:#B85C38;   /* primary accent (241 uses) */
  --color-gold-500:#C64E1E;
  --color-gold-600:#A53E15;
  --color-gold-700:#7E2E0F;

  /* ── Muted text, warmed toward the ground ──────────────────────────── */
  --color-slate2-400:#9AA598;
  --color-slate2-500:#7E8A7C;
  --color-slate2-600:#616C60;
  --color-slate2-700:#4A534A;

  /* ── Local tokens ──────────────────────────────────────────────────── */
  --sb-ground:#101410;
  --sb-deep:#0B0E0B;
  --sb-panel:#191E18;
  --sb-bone:#E8E5DA;
  --sb-persimmon:#B85C38;
  --sb-rule:rgba(232,229,218,.80);
  --sb-display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --sb-body:"Newsreader",Georgia,"Times New Roman",serif;
  --sb-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ── Poster-square corners ────────────────────────────────────────────
   Letterpress has no rounded corners. Held at 2px, not 0, so inputs and
   images do not look clipped in Safari. */
:root{
  --radius-xs:0px;  --radius-sm:0px;  --radius-md:2px;
  --radius-lg:2px;  --radius-xl:2px;  --radius-2xl:2px;
  --radius-3xl:2px; --radius-4xl:2px;
}

/* ── Ground ───────────────────────────────────────────────────────────
   header.php sets the navy wash + skyline as an INLINE style on <body>,
   and inline beats a stylesheet — hence !important. The photograph is
   kept and re-tinted rather than thrown away. */
body{
  background-image:linear-gradient(rgba(16,20,16,.91),rgba(16,20,16,.95)),
                   url('/assets/img/nashville-city.jpg')!important;
  background-color:var(--sb-ground)!important;
  color:var(--sb-bone);
  font-family:var(--sb-body);
}

/* ── Type ─────────────────────────────────────────────────────────────
   Wood type for the big voices, an editorial serif to read in.
   h3 deliberately stays sentence case: it carries venue names across 668
   listings, and caps there would shout and hurt scanning. */
html{font-family:var(--sb-body)}
h1,h2,h3{font-family:var(--sb-display);letter-spacing:-.018em;text-wrap:balance}
h1,h2{text-transform:uppercase;line-height:.9;font-weight:800}
h3{font-family:var(--sb-body);font-weight:600;letter-spacing:0}
.font-mono,[class*="tabular"]{font-variant-numeric:tabular-nums}

/* ── Rules: show bills are built from heavy rules, not soft shadows ─── */
.gold-rule{border-color:var(--sb-rule)!important;opacity:.9;border-width:2px}

/* ── Section label → spec line ──────────────────────────────────────── */
.section-label{
  font-family:var(--sb-mono)!important;
  color:var(--sb-persimmon)!important;
  letter-spacing:.16em;
  font-weight:500;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-gold{
  background:var(--sb-persimmon)!important;
  background-image:none!important;
  color:#12160F!important;
  border-radius:2px;
  font-family:var(--sb-display);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:1.05em;
  transition:background .18s,color .18s;
}
.btn-gold:hover{
  background:var(--sb-bone)!important;
  color:#12160F!important;
  opacity:1;
  transform:none;
}
.btn-outline-gold{
  border:2px solid var(--sb-persimmon)!important;
  color:var(--sb-persimmon)!important;
  border-radius:2px;
  font-family:var(--sb-display);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.btn-outline-gold:hover{
  background:var(--sb-persimmon)!important;
  color:#12160F!important;
}

/* ── Venue card → poster plate ──────────────────────────────────────── */
.venue-card{
  background:var(--sb-panel)!important;
  border:2px solid rgba(232,229,218,.28)!important;
  border-radius:2px;
  transition:box-shadow .18s,border-color .18s;
}
.venue-card:hover{
  border-color:var(--sb-persimmon)!important;
  transform:none;
  box-shadow:6px 6px 0 rgba(226,99,47,.28)!important;
}

/* ── Nav ────────────────────────────────────────────────────────────── */
.nav-link{
  font-family:var(--sb-mono);
  color:var(--color-slate2-400);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.74rem;
  border-bottom:2px solid transparent;
}
.nav-link:hover{color:var(--sb-persimmon);border-bottom-color:var(--sb-persimmon)}

/* ── Inputs ─────────────────────────────────────────────────────────── */
.field{
  background:var(--sb-deep)!important;
  border:2px solid var(--color-navy-600)!important;
  border-radius:2px;
  color:var(--sb-bone)!important;
  font-family:var(--sb-body);
}
.field:focus{border-color:var(--sb-persimmon)!important;outline:none}
.field::placeholder{color:var(--color-navy-500)!important;opacity:1}

/* ══ INLINE-STYLE REMAP ════════════════════════════════════════════════
   The ~1,300 hardcoded inline colours described at the top of this file
   cannot be reached by a variable, so the frequent ones are re-pointed by
   attribute selector. Every rule below is dark→dark or light→light.
   Counts are from a live grep on 2026-09-11; re-run it before adding more:
     grep -rhoE "color:\s*#[0-9a-fA-F]{3,6}" --include=*.php .
   ═════════════════════════════════════════════════════════════════════ */

/* Gold text → persimmon (249× #d4a843, 24× #c8a84b, 15× #c49a2a) */
[style*="color:#d4a843"],[style*="color: #d4a843"],
[style*="color:#c49a2a"],[style*="color: #c49a2a"]{color:var(--sb-persimmon)!important}
[style*="color:#c8a84b"],[style*="color: #c8a84b"],
[style*="color:#c8b87a"],[style*="color: #c8b87a"]{color:#D0794E!important}

/* Gold fills → persimmon. Their inline text is #0a0e1a / #05080f, which
   still reads on persimmon, so those are deliberately left alone. */
[style*="background:#d4a843"],[style*="background: #d4a843"]{background:var(--sb-persimmon)!important}
[style*="background:#c49a2a"],[style*="background: #c49a2a"]{background:#C64E1E!important}
[style*="background:#e0b84e"],[style*="background: #e0b84e"]{background:#D0794E!important}

/* Navy panels → the new ink panels (88× #0f1729, 41× #1a2035, …) */
[style*="background:#0f1729"],[style*="background: #0f1729"],
[style*="background:#10172a"],[style*="background: #10172a"],
[style*="background:#131c30"],[style*="background: #131c30"],
[style*="background:#0f1a2e"],[style*="background: #0f1a2e"]{background:var(--sb-panel)!important}
[style*="background:#1a2035"],[style*="background: #1a2035"],
[style*="background:#1a2540"],[style*="background: #1a2540"]{background:#232A22!important}
[style*="background:#0d1220"],[style*="background: #0d1220"],
[style*="background:#0d1424"],[style*="background: #0d1424"],
[style*="background:#0a0e1a"],[style*="background: #0a0e1a"]{background:var(--sb-deep)!important}
[style*="background-color:#0a0e1a"]{background-color:var(--sb-deep)!important}

/* Cool grey body text → warmed to sit on the ink ground */
[style*="color:#94a3b8"],[style*="color: #94a3b8"]{color:var(--color-slate2-400)!important}
[style*="color:#64748b"],[style*="color: #64748b"],
[style*="color:#6b7999"],[style*="color: #6b7999"]{color:var(--color-slate2-500)!important}

/* Light text → bone. Already light, so this only warms the hue. */
[style*="color:#f5f0e8"],[style*="color: #f5f0e8"],
[style*="color:#e2d9c5"],[style*="color: #e2d9c5"],
[style*="color:#f0ead6"],[style*="color: #f0ead6"],
[style*="color:#e8dcc8"],[style*="color: #e8dcc8"],
[style*="color:#f8f2e6"],[style*="color: #f8f2e6"]{color:var(--sb-bone)!important}

/* Dark input on the date field in venue.php, re-pointed to match .field */
[style*="border-color:#3a5080"]{border-color:var(--color-navy-600)!important}

/* ── Hero band ──────────────────────────────────────────────────────── */
.hero-bg{background-color:var(--sb-ground);border-bottom:3px solid var(--sb-rule)}
.hero-bg .slide-overlay{
  background:linear-gradient(to bottom,
    rgba(16,20,16,.44) 0%,
    rgba(16,20,16,.56) 45%,
    rgba(16,20,16,.90) 100%)!important;
}

/* ── Keyboard focus stays visible ───────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sb-persimmon);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}