/* SLICE! design tokens and base. Owner: core. Every color, size and shadow goes through a token here. */

@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/bangers-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lexend-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/lexend-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lexend-latin-700-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ink and paper */
  --ink: #14121f;
  --ink-soft: #3c3852;   /* secondary reading text, 11.2:1 on white */
  --ink-muted: #4f4a63;  /* meta text, 7.8:1 on paper-page */
  --ink-faint: #5e5878;  /* locked text, 5.5:1 on locked */
  --white: #ffffff;
  --paper: #fffaf0;      /* surfaces: panels, cards */
  --paper-page: #fbf6ea; /* landing, parent and public page background */
  --paper-kid: #f4efe1;  /* kid page background */
  --locked: #ebe7f3;

  /* brand */
  --grape: #6c3fc7;      /* white text 6.6:1; never ink text on grape */
  --grape-dark: #3b1f8f; /* links and strong grape text, 10.9:1 on paper-page */
  --grape-100: #e2d8ff;
  --grape-50: #f3ecff;
  --space: #2a1d5c;      /* night surfaces */
  --space-2: #3b2f69;    /* solid replacement for translucent white on space */
  --space-3: #4a3a8a;
  --space-deep: #1d1640;
  --space-text: #c9c1ff; /* secondary text and dashed outlines on space, 8.8:1 */

  /* fill-only accents on light surfaces: always carry ink text */
  --sun: #ffd23f;
  --sun-50: #fff3c4;
  --coral: #ff5d5d;
  --coral-dark: #c42f2f;
  --teal: #2ec4b6;
  --teal-dark: #0d6e66;  /* Tally labels and borders, 5.45:1 on teal-50 */
  --teal-50: #dff7f4;
  --glow: #7ff7ea;       /* shields, drawn with diagonal ink stripes */

  /* speakers */
  --leo: #3cb371;        /* chip, ink text 6.9:1 */
  --leo-dark: #1d6b3e;
  --leo-50: #e6f6ec;
  --villain: #c2410c;    /* bubble border and label, 4.6:1 on villain-50 */
  --villain-chip: #ff8c42;
  --villain-50: #fff0e0;

  /* states */
  --success: #1f7a3a;
  --success-50: #e3f8e6;
  --danger: #b42318;
  --danger-50: #ffe8e3;

  /* HUD and fields */
  --hud-pill: #2b2840;
  --hud-off: #b8b2d6;    /* flag-off text on ink, 9.1:1 */
  --field: #7c8099;      /* input and radio boundary, 3.9:1 on white */
  --viz-fill: #6c3fc7;   /* fraction model filled cell */

  /* type */
  --font-display: "Bangers", Impact, "Arial Black", sans-serif;
  --font-body: "Lexend", "Trebuchet MS", system-ui, sans-serif;
  --font-mail: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-label: 0.75rem;   /* 12, smallest allowed */
  --fs-xs: 0.8125rem;    /* 13 */
  --fs-sm: 0.875rem;     /* 14 */
  --fs-cap: 0.9375rem;   /* 15, captions and option sub-lines */
  --fs-base: 1rem;       /* 16, hints and explain cards */
  --fs-read: 1.0625rem;  /* 17, bubbles, questions, parent body on mobile */
  --fs-lg: 1.125rem;     /* 18 */
  --fs-xl: 1.25rem;      /* 20, Bangers tags */
  --fs-2xl: 1.5rem;      /* 24 */
  --fs-3xl: 1.75rem;     /* 28 */
  --fs-frac: 1.875rem;   /* 30, stacked fraction numerals */
  --fs-4xl: 2rem;        /* 32, ending title */
  --fs-5xl: 2.25rem;     /* 36, SFX, lock h1 */
  --fs-6xl: 2.5rem;      /* 40, kid start h1 */
  --fs-h2: clamp(2rem, 1.25rem + 2.8vw, 3rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 4vw, 4.25rem);
  --lh-read: 1.4;
  --lh-body: 1.5;
  --track-display: 0.04em;

  /* lines, radii, shadows */
  --line-thin: 2px;
  --line: 3px;
  --line-heavy: 4px;
  --r-panel: 6px;
  --r-surface: 10px;
  --r-control: 14px;
  --r-bubble: 18px;
  --r-pill: 999px;
  --sh-cap: 2px 2px 0 var(--ink);
  --sh-panel: 4px 4px 0 var(--ink);
  --sh-cell: 5px 5px 0 var(--ink);
  --sh-hero: 8px 8px 0 var(--ink);
  --sh-press-sm: 0 3px 0 var(--ink);
  --sh-press: 0 4px 0 var(--ink);
  --sh-press-lg: 0 5px 0 var(--ink);
  --sh-pressed: 0 1px 0 var(--ink);

  /* spacing, 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;

  /* layout */
  --tap: 44px;
  --gutter: 16px;
  --gutter-reader: 12px;
  --w-reader: 36rem;
  --w-parent: 34rem;
  --w-page: 67.5rem;
  --w-prose: 68ch;
  --hud-h: 52px;

  /* motion */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-press: 80ms;
  --dur-reset: 150ms;
  --dur-panel: 180ms;
  --dur-sfx: 220ms;
  --dur-slash: 250ms;
  --dur-bump: 280ms;

  /* focus ring: ink on light surfaces; .surface-dark switches it to sun */
  --ring: var(--ink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper-page);
  overflow-wrap: break-word;
}

[data-zone="kid"] body {
  background: var(--paper-kid);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--grape-dark);
  text-underline-offset: 0.18em;
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--line) solid var(--ring);
  outline-offset: 3px;
}

:where([tabindex="-1"]):focus {
  outline: none;
}

.surface-dark {
  --ring: var(--sun);
  color: var(--white);
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.num {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}