/* Newnan Cougar Theater — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #faf8f3; /* Page background in both themes. */
  --surface-raised: #ffffff; /* Cards, the ticket panel, and modal surfaces sitting above the page. */
  --surface-sunken: #f1ecdd; /* Footer background and alternating section bands on the schedule and about pages. */
  --ink: #0b233f; /* Primary body text and headings on surface, surface-raised, and surface-sunken. */
  --ink-muted: #3f4a63; /* Secondary text — showtimes, running time, byline credits under a headline. */
  --ink-faint: #6b7590; /* Placeholder text and decorative icon strokes only. Never body copy — meets contrast at 24px and up only. */
  --border: #8c7f5a; /* Structural borders that carry meaning — input outlines, table rules, the divider between showtimes in a list. */
  --border-subtle: #e4decc; /* Decorative hairlines only — the rule under the nav bar, spacing dividers with no informational role. */
  --brand-navy: #0b233f; /* Primary brand fill — the nav bar, footer band, primary buttons, the marquee background. */
  --brand-navy-strong: #071829; /* Hover/active state for navy fills in Light; link and icon color on dark surfaces in Dark. */
  --brand-gold: #b6a36b; /* Accent fill used sparingly, like a spotlight — the marquee underline, the genre badge fill, the ticket-count chip. */
  --brand-gold-strong: #7a6a3c; /* Text and icon use of gold — links, the active nav underline, the focus ring. Never set body copy in gold. */
  --on-navy: #ffffff; /* Text and icons placed on a brand-navy fill. */
  --on-gold: #0b233f; /* Text and icons placed on a brand-gold fill. */
  --success: #1b7f5c; /* Confirmation text and icons — "Tickets confirmed," seat map availability. */
  --on-success: #ffffff; /* Text and icons on a success fill, such as the confirmation banner. */
  --danger: #b23a11; /* Error text and icons — sold-out notices, form validation. */
  --on-danger: #ffffff; /* Text and icons on a danger fill. */
  --warning: #96530a; /* Caution text and icons — "Only 4 seats left," a schedule change notice. Kept distinct from brand-gold. */
  --on-warning: #ffffff; /* Text and icons on a warning fill. */
  --info: #2b5fa0; /* Informational text and icons — run-time notes, house-opens time. */
  --on-info: #ffffff; /* Text and icons on an info fill. */
  --focus-ring: #7a6a3c; /* Focus outline on every interactive element, on any surface — solid, never a glow. */
  --shadow-sm: 0 1px 2px rgba(10,24,48,0.08); /* Resting elevation for nav dropdowns and the ticket-count chip. */
  --shadow-md: 0 4px 12px rgba(10,24,48,0.12); /* ShowCards and other raised cards at rest. */
  --shadow-lg: 0 12px 32px rgba(10,24,48,0.16); /* Modals and the ticket checkout panel. */
}
[data-theme="dark"] {
  --surface: #071829;
  --surface-raised: #12294a;
  --surface-sunken: #071829;
  --ink: #f5efe0;
  --ink-muted: #b9c0d6;
  --ink-faint: #7c87a6;
  --border: #5a6799;
  --border-subtle: #1c2438;
  --brand-navy: #3a5a9c;
  --brand-navy-strong: #6e93d1;
  --brand-gold: #cfc08f;
  --brand-gold-strong: #b6a36b;
  --on-navy: #ffffff;
  --on-gold: #0b233f;
  --success: #4fd8a3;
  --on-success: #0b233f;
  --danger: #ff8a5c;
  --on-danger: #0b233f;
  --warning: #f0a542;
  --on-warning: #0b233f;
  --info: #7fb0f2;
  --on-info: #0b233f;
  --focus-ring: #cfc08f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
}
:root {
  --space-1: 4px; /* Icon-to-label gaps, badge inner padding. */
  --space-2: 8px; /* Tight stacks — a caption under a heading, chip padding. */
  --space-3: 12px; /* Button vertical padding, form field gaps. */
  --space-4: 16px; /* Card padding, the default gap between related elements. */
  --space-5: 20px; /* Gap between a ShowCard's poster and its text block. */
  --space-6: 24px; /* Gap between cards in a grid, nav item spacing. */
  --space-8: 32px; /* Padding inside the hero and footer bands. */
  --space-12: 48px; /* Gap between major page sections. */
  --space-16: 64px; /* Top and bottom padding of the hero marquee. */
  --space-24: 96px; /* Page-level breathing room above the footer, matching the source site's spacious institutional feel. */
  --radius-sm: 4px; /* Form inputs, small tags, the focus-ring offset. */
  --radius-md: 8px; /* Buttons and form controls. */
  --radius-lg: 16px; /* Cards, the show poster frame, the hero panel. */
  --radius-pill: 999px; /* Pill badges and the ticket-count chip. */
  --font-display: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-display-1: 400 72px/76px var(--font-display); /* The marquee hero headline on the home page. One per page. */
  --text-display-2: 400 44px/48px var(--font-display); /* A production's title on its ShowCard and detail page — set like a playbill title. */
  --text-h1: 700 32px/40px var(--font-sans); /* Page titles that are not a show's marquee title — Schedule, Cast & Crew, Support the Cougars. */
  --text-h2: 700 24px/32px var(--font-sans); /* Section headings within a page — "This Week," "Upcoming Productions." */
  --text-h3: 600 20px/28px var(--font-sans); /* Card and panel headings — a footer column title, a cast member's name. */
  --text-body-lg: 400 18px/28px var(--font-sans); /* Lede paragraphs — a show's synopsis opening line. */
  --text-body: 400 16px/24px var(--font-sans); /* Default paragraph copy throughout the platform. */
  --text-body-sm: 400 14px/20px var(--font-sans); /* Secondary copy — form hints, fine print, program credits. */
  --text-label: 600 13px/16px var(--font-sans); /* Uppercase, tracked labels — nav links, button text, badge text. Set in Sentence or Title case, rendered uppercase by the component. */
  --text-caption: 500 12px/16px var(--font-sans); /* Timestamps, dates, and metadata under a heading — set in ink-muted. */
}
.display-1 {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 76px;
  font-weight: 400;
  letter-spacing: 0;
}
.display-2 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}