/* El Trivia tokens. "Poster" direction.
   The wall (chrome) changes with theme. Poster swatches never do. */

/* Archivo variable 5.3.0 from Fontsource, latin subset, wdth 62 to 125, wght 100 to 900.
   font-stretch maps to the wdth axis, so titles use font-stretch percentages. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-wdth-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* Metric-matched fallback so the swap to Archivo barely moves text (Archivo sets 0.868 of Arial's width) */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 86.8%;
}

:root {
  color-scheme: light;
  --font: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* Wall, light */
  --wall: #F2F3F5;
  --surface: #FFFFFF;
  --surface-2: #E7E9ED;
  --ink: #14161B;
  --ink-2: #565C68;
  --line: #D9DCE2;
  --line-strong: #7C828D; /* brief value #858B96 darkened to reach 3:1 on --surface-2 */
  --on-ink: #FFFFFF;      /* text on --ink fills */

  /* Quiz feedback states (white text on all) */
  --state-correct: #1F7A4D;
  --state-partial: #8A5A00;
  --state-wrong: #B42318;
  --state-absent: #6B6E75;

  /* Depth */
  --hang: 0 14px 28px -14px rgba(20, 22, 27, 0.45);  /* posters as hung objects */
  --lift: 0 22px 36px -16px rgba(20, 22, 27, 0.5);
  --dialog-shadow: 0 24px 64px -12px rgba(20, 22, 27, 0.35);
  --skeleton: var(--light, var(--surface-2));

  /* Shape */
  --r-poster: 6px;
  --r-card: 16px;
  --r-pill: 999px;

  /* 8px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;
  --max: 1216px;
  --header-h: 64px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 250ms;

  /* Grain for poster fields only: 4% fractal noise */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* Dark: dims the wall only */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wall: #0E1014; --surface: #171A20; --surface-2: #20242B;
    --ink: #F2F3F5; --ink-2: #A5ACB8;
    --line: #2A2F37; --line-strong: #6B7280;
    --on-ink: #0E1014;
    --state-partial: #946200; --state-wrong: #C8372B;
    --hang: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --lift: 0 0 0 1px rgba(255, 255, 255, 0.14);
    --dialog-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px -12px rgba(0, 0, 0, 0.6);
    --skeleton: var(--surface-2);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wall: #0E1014; --surface: #171A20; --surface-2: #20242B;
  --ink: #F2F3F5; --ink-2: #A5ACB8;
  --line: #2A2F37; --line-strong: #6B7280;
  --on-ink: #0E1014;
  --state-partial: #946200; --state-wrong: #C8372B;
  --hang: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --lift: 0 0 0 1px rgba(255, 255, 255, 0.14);
  --dialog-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px -12px rgba(0, 0, 0, 0.6);
  --skeleton: var(--surface-2);
}

/* Poster swatches. Identical in both themes. --on is the text color on the field. */
.sw-vermilion { --field: #F0643C; --deep: #3A0F04; --light: #FFC7B3; --on: #3A0F04; }
.sw-cobalt    { --field: #3D6BE0; --deep: #0C1C4D; --light: #BFD0FF; --on: #FFFFFF; }
.sw-jade      { --field: #1FA67A; --deep: #03261E; --light: #B5EBD6; --on: #03261E; }
.sw-saffron   { --field: #F5B82E; --deep: #402A00; --light: #FFE7A8; --on: #402A00; }
.sw-rose      { --field: #E7688F; --deep: #45091F; --light: #FFC9D8; --on: #45091F; }
.sw-sky       { --field: #4CB4E6; --deep: #06304A; --light: #C6E9FA; --on: #06304A; }