/*
  The Sound Above: Stream Overlays Theme
  Shared theme contract with the website (_sass/_p_variables.scss).

  Source of truth: the site's "Digital Patina & Editorial Craft" tokens.
  The stream is the dark-surface rendering of the same palette:
    - Site paper (#faf8f5) becomes the text colour on sumi ink backgrounds.
    - Site craftsman teal is the structural accent (rules, edges, pills).
    - Site leather amber is the kicker and "live" accent, lifted for dark contrast.
    - Charter (site editorial serif) carries names and headlines.
    - Inter (site UI sans) carries body copy.
    - Avenir and the UGtastic red and navy are heritage only: the WHOIS Tech
      Community credo line and the logo mark. Never primary UI.

  Drift guard: bin/validate_obs_setup.rb asserts the shared tokens below
  match _sass/_p_variables.scss exactly.
*/

@font-face {
  font-family: "FiraCode Nerd Font Mono";
  src: url("/assets/fonts/FiraCodeNerdFontMono-Retina.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Shared with the site, identical hex values (validated) */
  --paper-canvas: #faf8f5;
  --ink-main: #1e232a;
  --ink-heading: #0f172a;
  --teal-craftsman: #0f766e;
  --amber-accent: #b45309;

  /* Warm, lively light craftsmanship palette */
  --bg-primary: rgba(250, 248, 245, 0.96);
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-pill: rgba(15, 118, 110, 0.08);
  --border-subtle: rgba(227, 223, 215, 0.95);
  --border-strong: var(--teal-craftsman);
  --text-main: var(--ink-main);
  --text-heading: var(--ink-heading);
  --text-muted: #525866;
  --text-amber: var(--amber-accent);
  --text-copper: #c2410c;
  --accent-glow: rgba(15, 118, 110, 0.15);

  /* UGtastic heritage marks, from the original cube logo */
  --heritage-red: #c81d25;
  --heritage-navy: #0d2c4a;
  --heritage-gold: #e2c07a;

  /* Typography: site stacks first, Avenir reserved for heritage lines */
  --font-display: "Charter", "Bitstream Charter", "Iowan Old Style", "Apple Garamond", "Baskerville", "Source Serif Pro", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heritage: "Avenir Next", "Avenir", var(--font-sans);
  --font-mono: "FiraCode Nerd Font Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;

  --shadow-elevation: 0 16px 40px rgba(45, 35, 20, 0.08), 0 4px 12px rgba(45, 35, 20, 0.04);
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Common Badge */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-pill);
  color: var(--text-amber);
  border: 1px solid var(--border-subtle);
}

.pill-badge .indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-amber);
  box-shadow: 0 0 8px var(--border-strong);
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Shared Card Surface */
.stream-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation);
}

/* Subtle amber edge accent */
.accent-edge-left {
  border-left: 4px solid var(--border-strong);
}

/* Typography Helpers */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Editorial display type, matching the site's heading treatment */
h1, h2,
.interviewee-name,
.episode-headline,
.hud-title,
.guest-line {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* Heritage lines keep the original Avenir broadcast voice */
.heritage-type,
.fcp-credo-banner {
  font-family: var(--font-heritage);
}

/* Small UGtastic logo mark used on starting and outro screens */
.brand-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}