/* games-703 · shared design tokens (Neubau #709)
   Eine Familie, zehn Spiele. Ein Spiel setzt GENAU EINE Zeile:
       :root { --hue: 150; }
   Daraus entstehen Akzent, Akzent-Flaeche und Akzent-Linie in beiden Themen.
   Nichts anderes wird hier ueberschrieben. Eigene Hex-Werte oder eigene
   Schriftgroessen im Spiel-CSS sind der Grund, warum zehn Spiele wie zehn
   Baukaesten aussahen (Esteban #703/#709). */

/* ---- Die eine Schrift ----------------------------------------------------
   Onest, variabel 100..900, tabellarische Ziffern (tnum). Eine Familie fuer
   Zahl, Satz und Knopf; die Rangfolge kommt aus Groesse und Gewicht, nie aus
   einer zweiten Schrift. Datei liegt neben dieser CSS, laeuft auch per file://. */
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-latin.woff2?v=21e838f0") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Grund (hell): Weiss, eine graue Flaeche, eine Haarlinie ------------ */
  --paper:        #FFFFFF;   /* Buehne und Blatt */
  --paper-2:      #F3F3F6;   /* Felder, Chips, leere Slots */
  --paper-3:      #E7E7EC;   /* Raster, Balken-Grund */
  --line:         #E4E4E9;   /* Haarlinie */
  --line-strong:  #C9C9D1;

  /* ---- Tinte: drei Stufen, alle AA auf Weiss ------------------------------ */
  --ink:          #0E0E11;   /* 19:1 */
  --ink-2:        #5B5C66;   /* 6.6:1 · Sekundaer, Erklaerung */
  --ink-3:        #767781;   /* 4.6:1 · Beschriftung, Quelle. Kleiner Text darf hier stehen. */

  /* ---- Akzent: aus dem Farbton des Spiels gerechnet ----------------------- */
  --hue:          255;
  --accent:       oklch(50% 0.17 var(--hue));
  --accent-ink:   #FFFFFF;
  --accent-soft:  oklch(96% 0.025 var(--hue));   /* Flaeche unter der Kurve */
  --accent-line:  oklch(80% 0.09 var(--hue));    /* Kurvenrand, Fokus-Halo */

  /* ---- Semantik ---------------------------------------------------------- */
  --good:         oklch(50% 0.15 150);
  --good-ink:     #FFFFFF;
  --warn:         oklch(62% 0.15 75);
  --bad:          oklch(52% 0.18 25);
  --truth:        oklch(58% 0.16 45);   /* Gegenfarbe zum Akzent: die Wahrheit, wo sie neben
                                           dem eigenen Strich liegt (DRAW) */

  /* ---- Typografie -------------------------------------------------------- */
  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* SECHS Stufen plus eine Mikro-Stufe fuer Beschriftungen INNERHALB einer
     Grafik (Band, Achse, Lineal). Hierarchie entsteht durch SPREIZUNG, nicht
     durch Schrumpfen: die Spruenge sind der Hebel. */
  --t-mega:  clamp(3.5rem, 17vw, 4.5rem);  /* 56..72 · DIE eine Zahl, einmal pro Bild */
  --t-xl:    1.75rem;                      /* 28 · Tagesabschluss, Kopfzahl klein */
  --t-lg:    1.25rem;                      /* 20 · Frage, der Satz mit der Wahrheit */
  --t-md:    1.0625rem;                    /* 17 · Fliesstext, Knopf (iOS-Koerpergroesse) */
  --t-sm:    0.9375rem;                    /* 15 · Erklaerung, Quelle */
  --t-xs:    0.8125rem;                    /* 13 · Beschriftung */
  --t-micro: 0.6875rem;                    /* 11 · NUR in Grafiken (Band, Achse, Lineal) */

  --tight:  -0.035em;
  --wide:    0.02em;

  /* ---- Raum -------------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 28px; --r-full: 999px;

  /* ---- Tiefe: Versatz plus weiche Unschaerfe, nie ein farbiger Halo ------- */
  --shadow-1: 0 1px 2px rgba(14,14,17,.05), 0 4px 12px rgba(14,14,17,.06);
  --shadow-2: 0 2px 6px rgba(14,14,17,.07), 0 16px 40px rgba(14,14,17,.12);
  --shadow-up:0 -1px 0 rgba(14,14,17,.04), 0 -16px 48px rgba(14,14,17,.12);

  /* ---- Bewegung: EINE Kurve, drei Dauern --------------------------------- */
  --ease:   cubic-bezier(.2,.7,.2,1);
  --ease-o: cubic-bezier(.16,1,.3,1);      /* expo-out: schnell weg, weich an */
  --ease-i: cubic-bezier(.7,0,.84,0);
  --d-fast: 180ms;
  --d-mid:  360ms;
  --d-slow: 560ms;

  --tap: 48px;
  color-scheme: light dark;
}

/* Ohne oklch (Safari < 15.4, Chrome < 111): ein fester Akzent fuer alle. */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --accent: #3651D4; --accent-soft: #EEF0FB; --accent-line: #B3BCEF;
    --good: #1F7A47; --warn: #B7791F; --bad: #B23A2E; --truth: #C4602A;
  }
}

/* ---- Dunkel: dieselbe Rangfolge, umgekehrte Werte ------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C0C0E; --paper-2: #18181C; --paper-3: #24242A;
    --line: #26262C; --line-strong: #3A3A42;
    --ink: #F4F4F6; --ink-2: #A6A7B0; --ink-3: #82838D;
    --accent: oklch(78% 0.14 var(--hue)); --accent-ink: #0C0C0E;
    --accent-soft: oklch(24% 0.04 var(--hue));
    --accent-line: oklch(45% 0.10 var(--hue));
    --good: oklch(76% 0.15 150); --good-ink: #0C0C0E;
    --warn: oklch(80% 0.14 80); --bad: oklch(72% 0.17 25); --truth: oklch(74% 0.15 45);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
    --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
    --shadow-up:0 -1px 0 rgba(255,255,255,.05), 0 -16px 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --paper: #0C0C0E; --paper-2: #18181C; --paper-3: #24242A;
  --line: #26262C; --line-strong: #3A3A42;
  --ink: #F4F4F6; --ink-2: #A6A7B0; --ink-3: #82838D;
  --accent: oklch(78% 0.14 var(--hue)); --accent-ink: #0C0C0E;
  --accent-soft: oklch(24% 0.04 var(--hue));
  --accent-line: oklch(45% 0.10 var(--hue));
  --good: oklch(76% 0.15 150); --good-ink: #0C0C0E;
  --warn: oklch(80% 0.14 80); --bad: oklch(72% 0.17 25); --truth: oklch(74% 0.15 45);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
  --shadow-up:0 -1px 0 rgba(255,255,255,.05), 0 -16px 48px rgba(0,0,0,.5);
}