/* ---------------------------------------------------------------------------
   "How to Catch a Breeze" — THEATER surface theme. Every rule is scoped beneath
   [data-theme-id="how-to-catch-a-breeze"][data-surface="theater"].
   Player chrome recolored per branding §12.2 (amber controls/scrubber, denim
   buffered); structure is fixed. Tokens mirror the landing theme so the two
   surfaces read as one title.
--------------------------------------------------------------------------- */

[data-theme-id="how-to-catch-a-breeze"][data-surface="theater"] {
  /* semantic accents — amber identity, clay commerce, denim media */
  --brand: 214 160 90; /* #D6A05A headlamp amber */
  --brand-ink: 226 180 111; /* #E2B46F */
  --action: 212 87 69; /* #D45745 taillight clay */
  --action-hover: 227 106 86; /* #E36A56 */
  --media: 123 139 153; /* #7B8B99 faded denim */
  --on-neon: 14 11 8; /* #0E0B08 */

  --success: 139 163 123;
  --warning: 216 168 92;
  --danger: 217 111 100;
  --info: 127 160 179;

  /* dark road neutrals */
  --bg: 11 13 13;
  --surface-0: 17 20 20;
  --surface-1: 23 27 27;
  --surface-2: 32 36 36;
  --surface-3: 42 46 45;
  --border: 52 55 53;
  --border-strong: 87 86 79;
  --text-primary: 240 228 210;
  --text-secondary: 183 170 151;
  --text-muted: 143 133 120;

  --font-display: var(--font-bitter), Georgia, serif;
  --font-sans: var(--font-source-sans), system-ui, sans-serif;
  --font-mono: var(--font-ibm-plex-mono), ui-monospace, monospace;

  background-color: rgb(var(--bg));
  color: rgb(var(--text-primary));
  font-family: var(--font-sans);
  min-height: 100vh;
}

/* Typography applied by element (the global font-* utilities reference
   --font-space-grotesk directly, so overriding --font-display alone doesn't retype). */
[data-theme-id="how-to-catch-a-breeze"][data-surface="theater"] :is(h1, h2, h3) {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
[data-theme-id="how-to-catch-a-breeze"][data-surface="theater"] .mono {
  font-family: var(--font-mono);
}

/* Restrained radii (branding §4.5). */
[data-theme-id="how-to-catch-a-breeze"][data-surface="theater"] .rounded-card {
  border-radius: 4px;
}

/* Interlude frame cross-fade — the only motion in the interlude (~420ms). */
[data-theme-id="how-to-catch-a-breeze"][data-surface="theater"] .breeze-interlude-frame {
  animation: breeze-frame-fade 420ms ease both;
}
@keyframes breeze-frame-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme-id="how-to-catch-a-breeze"][data-surface="theater"] * {
    animation: none !important;
    transition: none !important;
  }
}