/* ---------------------------------------------------------------------------
   "How to Catch a Breeze" — CHECKOUT surface theme. Every rule is scoped beneath
   [data-theme-id="how-to-catch-a-breeze"][data-surface="checkout"]. Tokens mirror
   the landing/theater themes so the buy flow reads as one title. The §11 locked
   invariants still hold: clay --action is the sole commerce color, the cyan-equivalent
   focus ring stays, ink-on-neon stays readable.
--------------------------------------------------------------------------- */

[data-theme-id="how-to-catch-a-breeze"][data-surface="checkout"] {
  /* 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 — the purchase CTA */
  --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;
}

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

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

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