/* ==========================================================================
   tobi_box Design-Tokens
   Stil: "Spieleregal" – bunte Pappschachteln mit dicker Tuschekontur auf Sonnengelb.
   Alle Farben/Abstände/Schriften kommen von hier. Spiele nutzen NUR diese Variablen.
   ========================================================================== */

@font-face {
  font-family: "Bagel Fat One";
  src: url("../fonts/bagel-fat-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Palette */
  --c-ink: #1B1340;        /* Tusche: Konturen, Text */
  --c-sun: #FFCE3A;        /* Sonnengelb: Bühne/Hintergrund */
  --c-paper: #FFFFFF;      /* Karten */
  --c-pink: #FF4F79;       /* Kaugummi: Hauptaktion */
  --c-sky: #3A86FF;        /* Himmel */
  --c-mint: #2EC4B6;       /* Minze: bereit/erfolgreich */
  --c-grape: #8338EC;      /* Traube */
  --c-orange: #FF8A3D;     /* Orange: Warnung */

  /* Semantik */
  --bg: var(--c-sun);
  --bg-dots: rgba(27, 19, 64, 0.07);
  --surface: var(--c-paper);
  --surface-2: #FFF4CC;
  --text: var(--c-ink);
  --text-muted: #5B527F;
  --outline: var(--c-ink);
  --primary: var(--c-pink);
  --on-primary: #FFFFFF;
  --success: var(--c-mint);
  --warning: var(--c-orange);
  --danger: #E5383B;
  --focus: var(--c-sky);

  /* Kontur & Tiefe (das "Pappe"-Gefühl) */
  --line: 3px;
  --line-bold: 4px;
  --depth: 5px;                                    /* Standard-Extrusion */
  --shadow: var(--depth) var(--depth) 0 var(--outline);
  --shadow-sm: 3px 3px 0 var(--outline);

  /* Formen */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Abstände (4er-Raster) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 16px;
  --maxw: 720px;

  /* Typo */
  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 1.875rem;
  --t-2xl: 2.5rem;
  --t-3xl: clamp(3rem, 12vw, 6rem);

  /* Bewegung – zurückhaltend */
  --ease: cubic-bezier(.2, .9, .3, 1.2);
  --dur: 140ms;

  color-scheme: light;
}

/* Dunkles Theme: Nacht-Party. Konturen bleiben tiefdunkel, Flächen werden Traube. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1646;
    --bg-dots: rgba(255, 206, 58, 0.06);
    --surface: #2C2366;
    --surface-2: #3A2F7E;
    --text: #FFF3D1;
    --text-muted: #BDB4E6;
    --outline: #0B0720;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1E1646;
  --bg-dots: rgba(255, 206, 58, 0.06);
  --surface: #2C2366;
  --surface-2: #3A2F7E;
  --text: #FFF3D1;
  --text-muted: #BDB4E6;
  --outline: #0B0720;
  color-scheme: dark;
}

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