/* El Trivia, Almanac direction: design tokens.
   Every colour, type, spacing, radius and motion value lives here.
   Contrast ratios for each pair are listed in README.md. */

/* Fonts: self-hosted latin subsets, see README.md for source and version. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-roman-opsz-wght.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-italic-opsz.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks so the swap to the web fonts does not move lines. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Iowan Old Style"), local("Palatino Linotype");
  font-style: normal;
  size-adjust: 90%;
  ascent-override: 81.7%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Iowan Old Style Italic");
  font-style: italic;
  size-adjust: 86%;
  ascent-override: 85.5%;
  descent-override: 30.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  size-adjust: 101%;
  ascent-override: 101.5%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}

:root {
  /* Colour, light theme */
  --paper: #F3F2EE;
  --panel: #FFFFFF;
  --sunken: #E8E6E0;
  --ink: #17181C;
  --ink-2: #50525A;
  --rule: #D3D0C8;
  --line-strong: #7D7A73;
  --signal: #1F3BB3;
  --signal-wash: #E6E9F6;
  --on-signal: #FFFFFF;

  --state-correct: #1F7A4D;
  --state-partial: #8A5A00;
  --state-wrong: #B42318;
  --state-absent: #6B6E75;
  --on-state: #FFFFFF;

  --scrim: rgb(23 24 28 / 0.42);
  --shadow-dialog: 0 18px 48px rgb(23 24 28 / 0.18), 0 2px 6px rgb(23 24 28 / 0.08);

  /* Type */
  --font-display: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "IBM Plex Sans", "Plex Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-label: 0.75rem;     /* 12px, uppercase labels */
  --fs-small: 0.8125rem;   /* 13px, metadata */
  --fs-ui: 0.875rem;       /* 14px, controls */
  --fs-body: 0.9375rem;    /* 15px, running text */
  --fs-lead: 1.0625rem;    /* 17px */
  --fs-title-s: 1.375rem;  /* 22px, section titles */
  --fs-title-m: 1.75rem;   /* 28px, quiz names in lists */
  --fs-title-l: 2.25rem;   /* 36px, quiz page title, wordmark */
  --fs-figure: 1.75rem;    /* 28px, record figures */
  --fs-record: 4rem;       /* 64px, result time */

  --lh-tight: 1.2;
  --lh-index: 1.3;
  --lh-text: 1.55;
  --tracking-label: 0.06em;

  /* Space, 4px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1200px;
  --target: 44px;

  /* Shape */
  --radius: 4px;
  --radius-tag: 2px;
  --hairline: 1px solid var(--rule);
  --focus-ring: 2px solid var(--signal);
  --focus-offset: 2px;

  /* Motion */
  --dur-quick: 120ms;
  --dur-rule: 200ms;
  --dur-toast: 180ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  color-scheme: light;
}

/* Dark palette. Applied when the visitor chose Dark, or when the system is
   dark and the visitor has not chosen Light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121316;
    --panel: #1B1D21;
    --sunken: #0C0D0F;
    --ink: #ECEAE4;
    --ink-2: #A3A39D;
    --rule: #2C2E33;
    --line-strong: #6A6C72;
    --signal: #8FA2F5;
    --signal-wash: #1E2336;
    --on-signal: #121316;
    --state-correct: #1F7A4D;
    --state-partial: #946200;
    --state-wrong: #C8372B;
    --state-absent: #6B6E75;
    --scrim: rgb(0 0 0 / 0.6);
    --shadow-dialog: 0 18px 48px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121316;
  --panel: #1B1D21;
  --sunken: #0C0D0F;
  --ink: #ECEAE4;
  --ink-2: #A3A39D;
  --rule: #2C2E33;
  --line-strong: #6A6C72;
  --signal: #8FA2F5;
  --signal-wash: #1E2336;
  --on-signal: #121316;
  --state-correct: #1F7A4D;
  --state-partial: #946200;
  --state-wrong: #C8372B;
  --state-absent: #6B6E75;
  --scrim: rgb(0 0 0 / 0.6);
  --shadow-dialog: 0 18px 48px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-rule: 0ms;
    --dur-toast: 0ms;
  }
}