/* Underhood design tokens. Ink on paper: near-black #1a1a1f on warm off-white #f4f3ef, the channel's
   own palette. Light is the default, dark follows the system, and html[data-theme] (set by /theme.js)
   overrides both. Dark mode turns the page over: paper ink on an ink ground. Fonts are self-hosted from
   /fonts/ (Outfit 800 for the wordmark and headings, Manrope variable for everything else, latin subsets). */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/outfit-800-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --paper: #f4f3ef;
  --paper-2: #ebe9e2; /* quiet wells, chips, the sheet behind a section */
  --paper-3: #e2dfd6;
  --surface: #fbfaf7; /* cards: a shade lighter than the page, lifted by shadow */
  --ink: #1a1a1f;
  --ink-2: #4b4b53;
  --ink-3: #74747c; /* captions, 4.5:1 on paper */
  --line: #dcd9d0;
  --line-strong: #c9c5b9;
  --wash: rgba(26, 26, 31, 0.06);
  --focus: #1a1a1f;
  --on-ink: #f4f3ef; /* type on an ink fill */
  --glow: rgba(255, 255, 255, 0.85); /* the soft light behind the wordmark, as on the channel banner */
  --show-in-light: block;
  --show-in-dark: none;

  --h-control: 40px;
  --h-control-lg: 48px;
  --r-control: 999px;
  --r-card: 18px;
  --r-art: 12px;
  --font: 'Manrope', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', 'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif;

  /* depth: one light source above, warm-tinted layered shadows (real depth, no flat fills) */
  --shadow-ink: 45, 40, 30;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-ink), 0.06);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-ink), 0.05), 0 3px 8px rgba(var(--shadow-ink), 0.06);
  --shadow-md: 0 2px 4px rgba(var(--shadow-ink), 0.05), 0 12px 32px rgba(var(--shadow-ink), 0.1);
  --shadow-lg: 0 4px 10px rgba(var(--shadow-ink), 0.06), 0 24px 60px rgba(var(--shadow-ink), 0.16);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Shared site-kit dock and cookie notice (/site-kit.js): the --sk-* tokens map the kit onto the
     palette. They reference the tokens above, so the dark blocks below switch them along with
     everything else. */
  --sk-font: var(--font);
  --sk-heading-font: var(--font-display);
  --sk-accent: var(--ink);
  --sk-accent-fill: var(--ink);
  --sk-on-accent: var(--on-ink);
  --sk-accent-shadow: 0 6px 16px rgba(var(--shadow-ink), 0.28);
  --sk-dark-fill: var(--paper-2);
  --sk-dark-ink: var(--ink);
  --sk-dark-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  --sk-surface: var(--surface);
  --sk-ink: var(--ink);
  --sk-muted: var(--ink-2);
  --sk-subtle: var(--paper-2);
  --sk-line: var(--line);
  --sk-ok: #2f8f4e;
  --sk-radius: 18px;
  --sk-radius-in: 12px;
  --sk-radius-btn: 999px;
  --sk-shadow: var(--shadow-lg);
  --sk-veil: rgba(26, 26, 31, 0.4);
  --sk-tip-bg: var(--ink);
  --sk-tip-ink: var(--paper);
  --sk-privacy-ink: var(--ink);
  --sk-inset: 16px;
  --sk-z: 45;
  --sk-z-modal: 55;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) {
    color-scheme: dark;
    --paper: #151518;
    --paper-2: #1d1d22;
    --paper-3: #26262c;
    --surface: #1c1c21;
    --ink: #f4f3ef;
    --ink-2: #b8b7b1;
    --ink-3: #8f8e89;
    --line: #2b2b31;
    --line-strong: #3a3a41;
    --wash: rgba(244, 243, 239, 0.07);
    --focus: #f4f3ef;
    --on-ink: #1a1a1f;
    --glow: rgba(255, 255, 255, 0.05);
    --show-in-light: none;
    --show-in-dark: block;
    --shadow-ink: 0, 0, 0;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.55);
    --rim: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --sk-veil: rgba(0, 0, 0, 0.6);
    --sk-ok: #6fcf8f;
  }
}

html[data-theme='dark'] {
  color-scheme: dark;
  --paper: #151518;
  --paper-2: #1d1d22;
  --paper-3: #26262c;
  --surface: #1c1c21;
  --ink: #f4f3ef;
  --ink-2: #b8b7b1;
  --ink-3: #8f8e89;
  --line: #2b2b31;
  --line-strong: #3a3a41;
  --wash: rgba(244, 243, 239, 0.07);
  --focus: #f4f3ef;
  --on-ink: #1a1a1f;
  --glow: rgba(255, 255, 255, 0.05);
  --show-in-light: none;
  --show-in-dark: block;
  --shadow-ink: 0, 0, 0;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.55);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --sk-veil: rgba(0, 0, 0, 0.6);
  --sk-ok: #6fcf8f;
}