/* ==========================================================================
   Yosemite Lanes — "House League" design tokens + base styles
   Load this FIRST on every page. See brand/design-system.md for usage rules.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;1,400&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,600..700,75;1,9..144,600..700,75&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* ---- Color: House League palette (AA pairs documented in design-system.md) */
  --cream:        #FBF5EA;  /* page base */
  --scoresheet:   #F3E7D3;  /* cards, table rows, tinted sections */
  --ink:          #33261C;  /* all body text on cream (13.49:1) */
  --neon-red:     #D9342B;  /* display headlines (large only), tabs, accents */
  --action-red:   #C22F24;  /* buttons/CTAs w/ --btn-label (5.54:1) */
  --ketchup:      #A8271F;  /* inline links, small-text accents (6.50:1) */
  --amber:        #E8A33D;  /* dividers, badges, glows; decorative-only on cream */
  --felt:         #2F5D4E;  /* table/standings headers, discount badges (7.39:1 w/ label) */
  --dark:         #221A14;  /* After Dark sections, footer (cream on it: 14.87:1) */
  --dark-raised:  #2E241B;  /* raised cards inside After Dark */
  --btn-label:    #FFFDF8;  /* labels on red/felt/dark */

  /* ---- Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Figtree", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --text-display: clamp(2.75rem, 1.6rem + 3.2vw, 4rem);    /* h1 44-64px */
  --text-h2:      clamp(2rem, 1.55rem + 1.4vw, 2.5rem);    /* 32-40px */
  --text-h3:      1.5rem;
  --text-h4:      1.25rem;
  --text-lead:    1.25rem;
  --text-body:    clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); /* 17-18px */
  --text-small:   0.875rem;
  --text-eyebrow: 0.8125rem;

  /* ---- Spacing (4px base) */
  --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;
  --section-pad: clamp(var(--space-8), 6vw, var(--space-9));
  --content-max: 72rem;
  --prose-max:   42rem;

  /* ---- Radii */
  --radius-card:  10px;
  --radius-photo: 8px;
  --radius-chip:  6px;
  --radius-field: 8px;
  --radius-pill:  999px;

  /* ---- Shadows & glows (warm, never gray) */
  --shadow-card: 0 1px 2px rgba(51,38,28,.06), 0 4px 14px rgba(51,38,28,.08);
  --shadow-lift: 0 2px 4px rgba(51,38,28,.08), 0 10px 26px rgba(51,38,28,.14);
  --shadow-pin:  0 3px 10px rgba(51,38,28,.22);
  --glow-amber:  0 6px 20px rgba(232,163,61,.45);
  --glow-neon:   0 0 12px rgba(217,52,43,.55), 0 0 34px rgba(217,52,43,.25);

  /* ---- Hero scrim */
  --scrim-dusk: linear-gradient(180deg, rgba(34,26,20,.55), rgba(34,26,20,.82));

  /* ---- Paper grain (tiled SVG noise data-URI; apply at 2-3% cream / ~4% dark) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base element styles
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 75;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2);      font-weight: 700; line-height: 1.12; }
h3 { font-size: var(--text-h3);      font-weight: 600; line-height: 1.22; }
h4 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 600; line-height: 1.3; margin: 0 0 0.5em; }

p { margin: 0 0 1em; max-width: var(--prose-max); }
small, .small { font-size: var(--text-small); }

a {
  color: var(--ketchup);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
a:hover { color: var(--action-red); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 600; }
em.signoff, .signoff {  /* "Let's roll." closers */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-lead);
}

/* Eyebrows / kickers */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-red);
  display: block;
  margin-bottom: var(--space-3);
}
.eyebrow--felt { color: var(--felt); }

/* Numeric data: prices, times, standings */
.num, .price, td.num, .hours {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Core shared components (page CSS extends these — never redefine hexes)
   ========================================================================== */

/* --- Bumper buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: 0.8em 1.75em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--primary { background: var(--action-red); color: var(--btn-label); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--glow-amber); color: var(--btn-label); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--scoresheet); color: var(--ink); }
.after-dark .btn--secondary { color: var(--cream); border-color: var(--cream); }
.after-dark .btn--secondary:hover { background: var(--dark-raised); color: var(--cream); }

/* --- Scoresheet card + red index tab */
.card {
  background: var(--scoresheet);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  position: relative;
}
.card--on-tint { background: var(--cream); }
.card__tab {
  position: absolute;
  top: -14px; left: var(--space-5);
  background: var(--neon-red);
  color: var(--btn-label);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-chip) var(--radius-chip) 0 0;
}
.after-dark .card { background: var(--dark-raised); border: 1px solid var(--amber); color: var(--cream); }

/* --- Badges */
.badge-est {  /* rotated ticket stub: EST. 1961 · MODESTO, CA */
  display: inline-block;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border: 2px dashed rgba(51,38,28,.55);
  border-radius: var(--radius-chip);
  transform: rotate(-2deg);
}
.badge-felt {
  display: inline-block;
  background: var(--felt);
  color: var(--btn-label);
  font-weight: 600;
  font-size: var(--text-small);
  padding: 4px 12px;
  border-radius: var(--radius-chip);
}
.chip-price {
  display: inline-block;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-chip);
}

/* --- Tables (rates, schedules, standings) */
.table-wrap { overflow-x: auto; }
table.scoresheet { border-collapse: collapse; width: 100%; background: var(--cream); border: 2px solid var(--ink); border-radius: var(--radius-card); }
table.scoresheet th {
  background: var(--felt);
  color: var(--btn-label);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
}
table.scoresheet td { padding: 12px 16px; border-top: 1px solid rgba(51,38,28,.18); }
table.scoresheet tbody tr:nth-child(even) { background: var(--scoresheet); }
table.scoresheet tbody tr:hover { box-shadow: inset 3px 0 0 var(--amber); }
table.scoresheet td.num { text-align: right; }

/* --- Forms (mock; success state swapped in by JS) */
label { display: block; font-weight: 600; font-size: var(--text-small); margin-bottom: var(--space-2); }
input, select, textarea {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-field);
  padding: 12px 16px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--felt); }
.form-success {
  background: var(--scoresheet);
  border: 2px solid var(--felt);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

/* --- After Dark rooms (Extreme Bowl, 300 Club, footer, hero scrim base) */
.after-dark {
  background: var(--dark);
  color: var(--cream);
}
.after-dark h1, .after-dark h2, .after-dark h3 { color: var(--cream); }
.after-dark a { color: var(--amber); }
.after-dark .eyebrow { color: var(--amber); }
.glow-neon { text-shadow: var(--glow-neon); }  /* After Dark headings only; one per section */

/* --- Readerboard announcement strip */
.readerboard {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px var(--space-4);
  border-top: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
}

/* --- Paper grain overlay (2-3% cream, ~4% dark) */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.025;
  pointer-events: none;
}
.after-dark.grain::before { opacity: 0.04; }

/* --- Photo treatments */
.photo-warm { filter: contrast(1.06) saturate(0.9) sepia(0.18) hue-rotate(-8deg) brightness(1.02); }
.photo-frame { border-radius: var(--radius-photo); overflow: hidden; }
.snapshot {  /* corkboard tier: low-res party pics, max-width ~360px */
  max-width: 360px;
  background: #fff;
  padding: 8px 8px 10px;
  box-shadow: var(--shadow-pin);
  transform: rotate(-1.5deg);
}
.snapshot:nth-child(even) { transform: rotate(1.5deg); }
.window-poster {  /* vendor flyers/promo graphics: cream mat + espresso border */
  background: var(--cream);
  padding: var(--space-4);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-card);
}
.portrait-arch {  /* Meet the House: Jim & Carter */
  border-radius: 12rem 12rem var(--radius-card) var(--radius-card);
  border: 3px solid var(--amber);
  overflow: hidden;
}
.duotone-dark {  /* rescue tier — After Dark sections only, card size only */
  filter: grayscale(1) sepia(.6) hue-rotate(-18deg) saturate(2.4) contrast(1.1) brightness(.9);
}

/* --- Layout helpers */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--section-pad); }
.lane-arrows { display: block; margin: var(--space-7) auto; }