/*
 * AlphaGen site theme for every public tutorial (public/tutorials-content/<name>/).
 * scripts/import-tutorial.mts links this file at the END of each tutorial, so it
 * overrides the tutorial's own page colours and fonts. Edit this one file to
 * restyle every tutorial at once.
 *
 * Only the page around the player is themed (background, text, chapters,
 * transcript, controls). The stage itself — the app screenshots and their
 * colours — is left exactly as the tutorial designed it.
 *
 * Colours mirror src/app/globals.css (dark theme): background oklch(0.1),
 * card oklch(0.12), border oklch(0.2), muted text oklch(0.65), primary
 * oklch(0.8 0.22 210.65) — the site's neon cyan.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('./GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* html:root:root out-ranks the tutorial's :root / [data-theme] / dark-mode rules. */
html:root:root {
  --bg: oklch(0.1 0 0);
  --panel: oklch(0.12 0 0);
  --fg: oklch(0.98 0 0);
  --muted: oklch(0.65 0 0);
  --line: oklch(0.2 0 0);
  --accent: oklch(0.8 0.22 210.65);
  --accent-soft: oklch(0.8 0.22 210.65 / 0.12);
  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

/* Inside the site (blog post, product page, /tutorials/<name>) the page already
   has its own padding and heading — keep the embed tight. */
html.in-frame body { padding: 0 0 24px; background: transparent; }
/* The site page shows the tutorial's title already — hide the tutorial's own header block. */
html.in-frame .top { display: none; }

/* Headings in the site's style: heavy, uppercase, tight tracking. */
h1, h2 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.eyebrow { color: var(--accent); letter-spacing: 0.2em; }