/*
 * theme.css — THIS APP'S DESIGN-SYSTEM VALUES. Seeded once, then yours.
 *
 * Every token name the design layer reads, in BOTH modes, with a deliberately
 * neutral value. The values are placeholders: rewrite every one of them from
 * the design brief on the first build, and edit them freely afterwards. An
 * app that ships this file unchanged has no design.
 *
 * THE SHAPE IS CHECKED, THE VALUES ARE NOT (lib/themeShape.ts). Three blocks
 * at most and only these selectors:
 *   :root                       the mode the page opens in (add
 *                               `color-scheme: dark` here if that is dark)
 *   html[data-theme="dark"]     the other mode, when the page opens light
 *   html[data-theme="light"]    the other mode, when the page opens dark
 * Inside them, only the token names below (and color-scheme). Every token
 * listed under PALETTE must be declared in :root — each one is a utility
 * (bg-canvas, text-ink, border-border, bg-accent-soft …) with no fallback,
 * so a missing token is a class that paints nothing. Text-on-ground pairs are
 * measured for contrast in both modes (ink on canvas 4.5:1, muted on surface
 * 4.4:1, accent-ink on accent 3:1, and so on) and a pair that fails names
 * itself in the build log. A token may reference another with var(), but a
 * token that references itself through any chain is a cycle, and CSS then
 * makes EVERY token in it invalid — the page goes transparent with white
 * text — so that is refused before it ships.
 *
 * Write colours as hex, rgb() or hsl(), or color-mix(in srgb, …) over those,
 * so the contrast can be measured. oklch and lab are not yet measurable
 * here and are refused on a token that is measured.
 *
 * PALETTE (32) — what each is legible on is in the name:
 *   --canvas           the page              --surface  a card    --surface-2  an inset, a band
 *   --border           a hairline            --border-strong       a control's edge
 *   --ink              text on the page      --muted               secondary text
 *   --accent           the filled action     --accent-hover        its hover
 *   --accent-ink       text ON --accent      --accent-text         accent-coloured text on the page
 *   --accent-soft      a tinted wash         --accent-strong       text on --accent-soft
 *   --accent-border    a tinted edge
 *   --success --success-ink --success-soft --success-strong   (and warning, danger)
 *   --chart-1 … --chart-6   six categorical colours, the brand first
 * TYPE — name the families you link in the layout's <head>:
 *   --font-display --font-body --font-mono --font-sans (= body)
 *   --display-weight --display-tracking --eyebrow-tracking
 * SHAPE — optional; every primitive has a fallback, and one line here
 * retunes all of them: --radius-btn --radius-card --radius-input --border-w
 *   --border-strong-w --shadow-card --shadow-raised --shadow-btn --card-pad
 *   --caps --caps-tracking --btn-weight --measure
 * Gradients and shadow ramps are tokens too: --gradient-<name>, --shadow-<name>.
 */

:root {
  --canvas: #f5f3ef;
  --surface: #ffffff;
  --surface-2: #f0f0f1;
  --border: #dadadb;
  --border-strong: #b6b6b7;
  --ink: #111214;
  --muted: #626263;
  --accent: #b51f2a;
  --accent-hover: #8f1720;
  --accent-ink: #ffffff;
  --accent-text: #a31822;
  --accent-strong: #86151e;
  --accent-soft: #e6e6e8;
  --accent-border: #b6b6b7;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfebe3;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6dd;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdf;
  --danger-strong: #b91c1c;
  --chart-1: #111214;
  --chart-2: #9b2226;
  --chart-3: #7c350c;
  --chart-4: #425605;
  --chart-5: #0b5668;
  --chart-6: #5152a5;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.06em;
}

html[data-theme="dark"] {
  --canvas: #111214;
  --surface: #232326;
  --surface-2: #2b2b2f;
  --border: #38383b;
  --border-strong: #5d5d5f;
  --ink: #f5f3ef;
  --muted: #a0a0a1;
  --accent: #f5f3ef;
  --accent-hover: #e4e4e7;
  --accent-ink: #111214;
  --accent-text: #f5f3ef;
  --accent-strong: #f5f3ef;
  --accent-soft: #2b2b2f;
  --accent-border: #3f3f46;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172f22;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #d57575;
  --chart-1: #a1a1aa;
  --chart-2: #cb70a4;
  --chart-3: #be6436;
  --chart-4: #98911a;
  --chart-5: #159670;
  --chart-6: #1c9ec8;
}

.video-page { min-height: 100vh; background: var(--canvas); color: var(--ink); padding: 0 20px 28px; }
.brand { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 24px 0; font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: .04em; }
.brand small { font-size: 10px; letter-spacing: .16em; }
.brand-mark { width: 9px; height: 26px; background: var(--accent); transform: skew(-12deg); }
.content { width: min(100%, 410px); margin: 22px auto 0; }
.intro { margin-bottom: 18px; }
.eyebrow { color: var(--accent-text); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
h1 { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 2.7rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.05; margin: 9px 0 0; text-transform: uppercase; }
.video-frame { width: 100%; aspect-ratio: 9 / 16; background: var(--ink); overflow: hidden; border-radius: 8px; }
.video-frame iframe { display: block; border: 0; width: 100%; height: 100%; }
.cta { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; min-height: 60px; padding: 0 20px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 800; text-decoration: none; }
.cta:hover { background: var(--accent-hover); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cta span { font-size: 22px; }
footer { max-width: 1060px; margin: 48px auto 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
footer span { color: var(--accent-text); padding: 0 5px; }
@media (min-width: 768px) { .video-page { padding-left: 40px; padding-right: 40px; } .content { margin-top: 34px; } }