/* =========================================================================
   SuperMoo — Design System Tokens (single source of truth)
   Ink + milk base · one hot-pink accent · flat surfaces · lead on speed
   ========================================================================= */

/* ---- Fonts (Google Fonts) -----------------------------------------------
   Display: Anton (tall condensed grotesque — UPPERCASE headlines & labels)
   Body:    Hanken Grotesk (clean grotesque)
   Mono:    Space Mono (technical labels, embed code, dimensions)          */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Color — Ink + milk base · one hot-pink accent -------------------- */
  /* Base reads black-and-white, like a cow. Pink is a punch, not a wash. */
  --milk:       #FBF7F0;   /* warm page background ("milk")                */
  --paper:      #FBF7F0;   /* page background — alias of --milk            */
  --paper-2:    #FFFFFF;   /* cards / surfaces                             */
  --paper-3:    #F2ECE1;   /* subtle warm band / sunken fill              */
  --light:      #DED5C7;   /* strong warm divider / fill                  */

  --ink:        #161514;   /* anchor — neutral cow-black, no brown         */
  --ink-2:      #232120;   /* slightly lifted dark surface                */
  --ink-soft:   #34312E;   /* strong secondary text                       */
  --text-muted: #56524F;   /* secondary / muted text on light             */
  --ink-mute:   #56524F;   /* alias of --text-muted                       */
  --ink-faint:  #928E89;   /* placeholder / disabled                      */

  --pink:       #FF2E88;   /* THE accent — buttons, play marks, scrubber   */
  --pink-press: #E0156E;   /* pressed / hover-dark                        */
  --pink-wash:  #FFE3EF;   /* soft pink fill — badges, highlights         */
  --pink-deep:  #8E0E4C;   /* text on pink-wash, for contrast             */
  --pink-ink:   #8E0E4C;   /* alias of --pink-deep                        */

  --line:       #E7E0D6;   /* warm hairline / divider on light            */
  --line-2:     #D8CFC0;   /* stronger hairline                           */
  --line-dk:    rgba(255, 255, 255, 0.14); /* hairline on ink            */

  /* Semantic — used in the speed-comparison component */
  --good:       #1FA971;   --good-ink:  #0F6E56;   --good-bg:  #E1F5EE;
  --bad:        #E2574B;   --bad-ink:   #A32D2D;   --bad-bg:   #FCEBEB;

  /* On-ink text (milk on ink) */
  --on-ink:       #FBF7F0;
  --on-ink-soft:  rgba(251, 247, 240, 0.72);
  --on-ink-mute:  rgba(251, 247, 240, 0.50);

  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Anton', 'Haettenschweiler', 'Arial Narrow', 'Impact', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid display sizes (desktop-first, clamp for safety) */
  --t-display:  clamp(54px, 6.4vw, 84px);  /* hero                        */
  --t-h1:       clamp(42px, 5.2vw, 72px);
  --t-h2:       clamp(30px, 3.2vw, 40px);
  --t-h3:       24px;
  --t-h4:       20px;
  --t-body-lg:  19px;
  --t-body:     17px;
  --t-small:    15px;
  --t-mono:     13px;

  /* ---- Spacing (8px base) ---------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --section-y:  clamp(72px, 9vw, 128px);    /* vertical section rhythm     */
  --gutter:     clamp(20px, 4vw, 48px);     /* page side gutter            */
  --maxw:       1200px;                     /* content max width           */
  --maxw-text:  680px;                      /* prose measure               */

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  12px;
  --r-md:  20px;   /* default card                                          */
  --r-lg:  28px;
  --r-pill: 999px;

  /* ---- Shadow — flat surfaces: restrained, no glows --------------------- */
  --sh-sm:  0 1px 2px rgba(20,20,20,0.05);
  --sh-md:  0 2px 8px rgba(20,20,20,0.07);
  --sh-lg:  0 10px 28px rgba(20,20,20,0.10);
  --sh-pink: none;   /* pink is a punch, not a glow */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* =========================================================================
   DARK THEME — the same system, inverted
   Set data-theme="dark" on <html>. The base stays "ink + milk": neutral
   near-blacks for surfaces, milk for type, hot pink kept as THE punch.
   Token values flip here; a handful of components that use --ink as a
   *surface* (player, bands, footer, code) are pinned dark in site.css.
   ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — neutral near-black, ascending elevation */
  --milk:       #161514;
  --paper:      #161514;   /* page background — neutral cow-black          */
  --paper-2:    #232120;   /* cards / raised surfaces                      */
  --paper-3:    #1B1A18;   /* sunken band / inset fills                    */
  --light:      #363330;   /* strong divider / fill                       */

  /* Foreground — milk on ink */
  --ink:        #F4EEE3;   /* primary text (the "milk" foreground)         */
  --ink-2:      #2A2724;   /* elevated dark surface (card--ink, ph--ink)   */
  --ink-soft:   #D8D0C3;   /* strong secondary text                       */
  --text-muted: #A89E8F;   /* secondary / muted text                      */
  --ink-mute:   #A89E8F;
  --ink-faint:  #6B6764;   /* placeholder / disabled                      */

  /* Pink — same punch, nudged for legibility on dark; tints + on-tint flip */
  --pink:       #FF3D90;
  --pink-press: #FF6AA8;   /* hover goes brighter on dark                 */
  --pink-wash:  #2C141E;   /* dark wine tint — badges, icon tiles         */
  --pink-deep:  #FF93BD;   /* text / icon on wash                         */
  --pink-ink:   #FF8AB6;   /* eyebrows + pink text on dark                */

  /* Lines */
  --line:       #2C2620;
  --line-2:     #3B342C;
  --line-dk:    rgba(255, 255, 255, 0.13);

  /* Semantic — speed comparison */
  --good:       #2FBE86;   --good-ink:  #74E3BC;   --good-bg:  #102720;
  --bad:        #F06A5C;   --bad-ink:   #F4A199;   --bad-bg:   #2B1411;

  /* On-ink text stays light */
  --on-ink:       #F4EEE3;
  --on-ink-soft:  rgba(244, 238, 227, 0.74);
  --on-ink-mute:  rgba(244, 238, 227, 0.52);

  /* Shadow — deeper on dark, still no glows */
  --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-md:  0 3px 12px rgba(0, 0, 0, 0.5);
  --sh-lg:  0 16px 40px rgba(0, 0, 0, 0.62);
  --sh-pink: none;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
::selection { background: var(--pink); color: #fff; }

/* ---- Type helpers ------------------------------------------------------- */
.display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.0;
  text-wrap: balance;
  font-synthesis-weight: none;
}
.display { font-size: var(--t-display); letter-spacing: 0.008em; line-height: 0.93; }
.h1 { font-size: var(--t-h1); letter-spacing: 0.01em; line-height: 0.97; }
.h2 { font-size: var(--t-h2); letter-spacing: 0.012em; line-height: 1.0; }
.h3 { font-size: var(--t-h3); line-height: 1.06; letter-spacing: 0.018em; }
.h4 { font-size: var(--t-h4); line-height: 1.08; letter-spacing: 0.02em; }
/* Anton has no italic — the dry-wit emphasis device becomes the hot-pink punch */
.display em, .h1 em, .h2 em, .h3 em, .h4 em { font-style: normal; font-weight: 400; color: var(--pink); }

.lead { font-size: var(--t-body-lg); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.muted { color: var(--ink-mute); }
.small { font-size: var(--t-small); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pink-ink);
}
.eyebrow--mute { color: var(--ink-mute); }
.eyebrow--ink { color: var(--pink); }
/* technical / dev label — genuine mono usage only */
.mono-tag {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ---- Layout primitives -------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--s-4); }
.measure { max-width: var(--maxw-text); }

.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink .eyebrow { color: var(--pink); }
/* On dark sections, headline emphasis stays solid (white), not pink */
.band-ink :is(.display, .h1, .h2, .h3, .h4) em,
.bgvideo :is(.display, .h1, .h2, .h3, .h4) em { color: inherit; }
.band-ink .lead { color: var(--on-ink-soft); }
.band-ink .muted { color: var(--on-ink-mute); }
.band-ink .mono-tag { color: var(--on-ink-mute); }
.band-ink .try-hint { color: var(--pink); }
.band-ink .opt.is-on { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
.band-ink .viz { border: none; }
.band-paper-3 { background: var(--paper-3); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-body);
  line-height: 1;
  padding: 15px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btn--pink { background: var(--pink); color: #fff; box-shadow: var(--sh-pink); }
.btn--pink:hover { background: var(--pink-press); }

.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: #000; transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(24,24,27,0.03); }

.btn--on-ink { background: var(--on-ink); color: var(--ink); }
.btn--on-ink:hover { background: #fff; }
.btn--ghost-on-ink { background: transparent; color: var(--on-ink); border-color: var(--line-dk); }
.btn--ghost-on-ink:hover { border-color: var(--on-ink); }

.btn--lg { padding: 18px 30px; font-size: var(--t-body-lg); }
.btn--sm { padding: 11px 18px; font-size: var(--t-small); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
}
.link-arrow .arr { transition: transform .2s var(--ease); }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ---- Pills / tags ------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 400; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.035em; line-height: 1; white-space: nowrap;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--ink-soft);
  background: var(--paper-2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.pill--ink { background: transparent; border-color: var(--line-dk); color: var(--on-ink-soft); }

/* ---- Card --------------------------------------------------------------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--sh-sm);
}
.card--flat { box-shadow: none; }
.card--ink { background: var(--ink-2); border-color: var(--line-dk); color: var(--on-ink); }

/* ---- Image / mascot placeholder ---------------------------------------- */
.ph {
  position: relative;
  border-radius: var(--r-md);
  background-color: var(--paper-3);
  background-image: repeating-linear-gradient(135deg,
      rgba(24,24,27,0.045) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--line-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.ph__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-mute); text-align: center; padding: 8px 12px;
}
.ph--pink { background-color: var(--pink-wash);
  background-image: repeating-linear-gradient(135deg,
      rgba(232,67,147,0.10) 0 10px, transparent 10px 20px);
  border-color: rgba(232,67,147,0.3); }
.ph--pink .ph__label { color: var(--pink-ink); }
.ph--ink { background-color: var(--ink-2);
  background-image: repeating-linear-gradient(135deg,
      rgba(255,255,255,0.05) 0 10px, transparent 10px 20px);
  border-color: var(--line-dk); }
.ph--ink .ph__label { color: var(--on-ink-mute); }

/* ---- Wordmark (typeset stand-in for real logo) ------------------------- */
/* ---- Logo (real SVG) + wordmark fallback ------------------------------- */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 30px; width: auto; display: block; }
.logo--on-ink img { filter: invert(1) brightness(1.9); }

.wordmark {
  font-family: var(--font-body); font-weight: 800; font-size: 21px;
  letter-spacing: -0.02em; color: var(--ink); display: inline-flex; align-items: center;
}
.wordmark .moo { color: var(--pink); }
.wordmark--on-ink { color: var(--on-ink); }

/* ---- Utility ------------------------------------------------------------ */
.hairline { height: 1px; background: var(--line); border: 0; }
.hairline-dk { height: 1px; background: var(--line-dk); border: 0; }
.grid { display: grid; gap: var(--s-5); }
.row { display: flex; gap: var(--s-3); align-items: center; }
.wrap { flex-wrap: wrap; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }