/* =============================================================
   SILVER SPUR SALOON BAR — Colors & Type
   Dark-mode-first design system
   ============================================================= */

/* ----- Web fonts (Google Fonts substitutes — flag for review) ----- */
@import url("https://fonts.googleapis.com/css2?family=Rye&family=Alfa+Slab+One&family=Special+Elite&family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600;700&family=Caveat:wght@400;700&display=swap");

:root {
  /* ===========================================================
     COLOR — Saloon palette
     Dark, smoky, neon-lit. Black + warm wood + neon accents.
     =========================================================== */

  /* Base — backgrounds & surfaces */
  --bg-pitch:        #0a0807;   /* outside of frame, deep black */
  --bg-saloon:       #14100e;   /* primary surface — like aged black wood */
  --bg-charcoal:     #1c1815;   /* raised panels, cards */
  --bg-leather:      #2a201b;   /* hovered cards, leather booth */
  --bg-walnut:       #3a2a20;   /* wood trim, dividers */
  --bg-mahogany:     #4a2f22;   /* warm wood feature */

  /* Foreground — text & strokes on dark */
  --fg-bone:         #f6efe2;   /* primary text, warm white */
  --fg-parchment:    #e6dcc6;   /* secondary text */
  --fg-dust:         #9a8e7a;   /* muted text, captions */
  --fg-smoke:        #5e5448;   /* placeholder, disabled */
  --fg-iron:         #2e2620;   /* hairline rules on dark */

  /* Neon accents — pulled from real venue signage */
  --neon-pink:       #ff2d8a;   /* primary neon, hot pink */
  --neon-pink-glow:  #ff6fb3;
  --neon-cyan:       #2ee6ff;   /* secondary neon, electric blue */
  --neon-cyan-glow:  #7ff1ff;
  --neon-amber:      #ffb648;   /* warm bulb, lantern */
  --neon-amber-glow: #ffd07a;
  --neon-white:      #fff7e6;   /* warm filament white */

  /* Brand reds — saloon, chalkboard */
  --rust:            #b8341e;   /* faded poster red */
  --barn-red:        #7a1f12;   /* deep oxblood */
  --whiskey:         #c98a3a;   /* amber glass, polished brass */
  --brass:           #8a6a3a;

  /* Semantic */
  --success:         #6fbf73;
  --warning:         #ffb648;
  --danger:          #ff4d3d;
  --info:            #2ee6ff;

  /* Foreground tokens (semantic) */
  --fg-1: var(--fg-bone);
  --fg-2: var(--fg-parchment);
  --fg-3: var(--fg-dust);
  --fg-4: var(--fg-smoke);

  --bg-1: var(--bg-saloon);
  --bg-2: var(--bg-charcoal);
  --bg-3: var(--bg-leather);
  --bg-4: var(--bg-walnut);

  --accent:        var(--neon-pink);
  --accent-2:      var(--neon-cyan);
  --accent-warm:   var(--neon-amber);

  /* Borders */
  --border-hairline: rgba(246, 239, 226, 0.08);
  --border-soft:     rgba(246, 239, 226, 0.14);
  --border-strong:   rgba(246, 239, 226, 0.28);
  --border-neon:     var(--neon-pink);

  /* ===========================================================
     TYPOGRAPHY
     Display: western/wood-type for short headlines.
     Body: clean condensed sans for menus, UI, longform.
     Accent: typewriter for tickets/posters; script for personal.
     =========================================================== */

  /* Font families — Google Fonts substitutes (see README) */
  --font-saloon:   "Rye", "Smokum", Georgia, serif;            /* tooled western, headlines */
  --font-wood:     "Alfa Slab One", "Rockwell", serif;         /* slab gig-poster headlines */
  --font-stencil:  "Bebas Neue", "Oswald", Impact, sans-serif; /* tall stencil — ALL CAPS labels */
  --font-display:  "Barlow Condensed", "Oswald", sans-serif;   /* event titles, hero copy */
  --font-body:     "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-type:     "Special Elite", "Courier New", monospace;  /* tickets, receipts */
  --font-script:   "Caveat", cursive;                          /* hand-chalked notes */

  /* Type scale (clamp for fluidity) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:   124px;

  /* Line heights */
  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-base:   0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;
  --tracking-widest: 0.24em;

  /* ===========================================================
     SPACING & RADII
     =========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ===========================================================
     SHADOWS & GLOWS
     =========================================================== */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:    0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg:    0 18px 48px rgba(0,0,0,0.6);
  --shadow-inset: inset 0 1px 0 rgba(246,239,226,0.06), inset 0 -1px 0 rgba(0,0,0,0.4);

  /* Neon glows — used for buttons, signage, hover */
  --glow-pink:  0 0 6px rgba(255,45,138,0.45), 0 0 18px rgba(255,45,138,0.22), 0 0 36px rgba(255,45,138,0.1);
  --glow-cyan:  0 0 6px rgba(46,230,255,0.45), 0 0 18px rgba(46,230,255,0.22), 0 0 36px rgba(46,230,255,0.1);
  --glow-amber: 0 0 6px rgba(255,182,72,0.4), 0 0 18px rgba(255,182,72,0.2);

  /* ===========================================================
     MOTION
     =========================================================== */
  --ease-saloon: cubic-bezier(.2,.7,.2,1);
  --ease-snap:   cubic-bezier(.4,1.6,.5,1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ===========================================================
   SEMANTIC ELEMENT STYLES
   =========================================================== */
html, body {
  background: var(--bg-saloon);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-saloon);
  font-size: clamp(48px, 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--fg-1);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-wood);
  font-size: clamp(36px, 5vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-base);
  font-weight: 400;
  color: var(--fg-1);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-stencil);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-wider);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-stencil);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
  font-weight: 400;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ticket {
  font-family: var(--font-type);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

.chalk {
  font-family: var(--font-script);
  font-size: var(--fs-xl);
  color: var(--fg-bone);
}

code, .mono {
  font-family: var(--font-type);
  font-size: 0.95em;
  color: var(--neon-amber);
}

a {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(46,230,255,0.35);
  transition: color var(--dur-fast) var(--ease-saloon),
              border-color var(--dur-fast) var(--ease-saloon);
}
a:hover { color: var(--neon-cyan-glow); border-color: var(--neon-cyan); }

hr {
  border: 0;
  height: 1px;
  background: var(--border-hairline);
  margin: var(--space-6) 0;
}

::selection { background: var(--neon-pink); color: var(--bg-saloon); }

/* Neon text utility */
.neon-pink {
  color: var(--neon-pink);
  text-shadow: var(--glow-pink);
}
.neon-cyan {
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}
.neon-amber {
  color: var(--neon-amber);
  text-shadow: var(--glow-amber);
}