/* tokens.css – design tokens of the Spielkoffer ("Reise-Abenteuer", concept § 4.5).
   Games use ONLY these tokens (no raw colours) so Nachtmodus works automatically.
   Names follow the concept; a few short aliases (bottom of :root) stay for older code. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/Fredoka-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("../fonts/Andika-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("../fonts/Andika-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- colours: day (concept § 4.5.1) ----------------------------------- */
  --paper: #FFF6E6;            /* app background = theme-color */
  --paper-deep: #FBE9CC;       /* board underlays, sections, pressed areas */
  --card: #FFFDF8;             /* cards, dialogs, card fronts */
  --ink: #1E2A4A;              /* text + outlines (navy) */
  --ink-soft: #4A5677;         /* secondary text */
  --ink-faint: #8A93AB;        /* disabled, hairlines (not for text < 24 px) */
  --line: rgba(30, 42, 74, .14);
  --sky: #3FA9F5;      --sky-soft: #D9EFFE;      --sky-deep: #0F6FB8;      /* Spiele, player 2 */
  --sun: #FFC83D;      --sun-soft: #FFF1C7;      --sun-deep: #A86F00;      /* Werkzeuge, player 3, Tipp, Koffi */
  --coral: #FF6F61;    --coral-soft: #FFE1DD;    --coral-deep: #C23B2E;    /* primary buttons, player 1 */
  --mint: #2EC4A0;     --mint-soft: #D2F5EB;     --mint-deep: #12795F;     /* Mathe, player 4, success */
  --lavender: #A88BEB; --lavender-soft: #EDE6FC; --lavender-deep: #6A4BC0; /* profiles, badges, Koffi's belt */
  --warn: #FF8A3D;             /* danger indicator, 3rd-side warning (never red for kids) */
  --focus: #1E2A4A;
  --edge: var(--ink);          /* outline / sticker contour colour */
  --on-accent: #1E2A4A;        /* text on accent surfaces (always navy by day) */

  /* --- player identity (concept § 4.5.2): colour + shape + avatar ------- */
  --p1: var(--coral); --p1-soft: var(--coral-soft); --p1-deep: var(--coral-deep);  /* ● circle   */
  --p2: var(--sky);   --p2-soft: var(--sky-soft);   --p2-deep: var(--sky-deep);    /* ▲ triangle */
  --p3: var(--sun);   --p3-soft: var(--sun-soft);   --p3-deep: var(--sun-deep);    /* ★ star     */
  --p4: var(--mint);  --p4-soft: var(--mint-soft);  --p4-deep: var(--mint-deep);   /* ■ square   */

  /* --- category colours (game cards) ------------------------------------ */
  --cat-strategie: var(--sky-soft);
  --cat-glueck: var(--sun-soft);
  --cat-merk: var(--lavender-soft);
  --cat-logik: var(--mint-soft);
  --cat-mathe: var(--coral-soft);

  /* --- typography (concept § 4.5.3; iPhone values, iPad below) ---------- */
  --font-display: "Fredoka", "Andika", ui-rounded, system-ui, -apple-system, sans-serif;
  --font-body: "Andika", system-ui, -apple-system, sans-serif;
  --fs-display: 36px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-tile: 20px;
  --fs-button: 20px;
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-parent: 15px;
  --fs-number: 48px;
  --fs-tool: 120px;

  /* --- shape, shadow, spacing (concept § 4.5.4) ------------------------- */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --stroke-w: 3px;
  --stroke: var(--stroke-w) solid var(--edge);
  --stroke-s: 2px solid var(--edge);
  --shadow-sticker: 0 5px 0 rgba(30, 42, 74, .18), 0 12px 24px rgba(30, 42, 74, .10);
  --shadow-press: 0 1px 0 rgba(30, 42, 74, .18);
  --shadow-float: 0 20px 44px rgba(30, 42, 74, .20);
  --shadow-piece: 0 3px 0 rgba(30, 42, 74, .25);
  --ledge: 5px;                /* depth of the sticker shadow; pressing moves 4 px down */
  --ledge-c: rgba(30, 42, 74, .18);  /* colour of the offset (ledge) part of sticker shadows */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --gutter: 16px;
  --tap: 64px;                 /* kids' buttons */
  --tap-min: 48px;             /* contract minimum (iPhone); 60 px on iPad */
  --tap-xl: 88px;              /* Kleine-Modus (Vorschule) */

  /* --- motion (concept § 4.6) -------------------------------------------- */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 320ms;
  --t-max: 400ms;

  /* --- safe areas (overridable in tests) -------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* --- short aliases (kept for existing modules) ------------------------- */
  --paper-2: var(--paper-deep);
  --paper-3: color-mix(in srgb, var(--paper-deep) 70%, var(--ink) 8%);
  --ink-2: var(--ink-soft);
  --ink-3: var(--ink-faint);
  --on-color: var(--on-accent);
  --sky-2: var(--sky-deep);  --sky-t: var(--sky-soft);
  --sun-2: var(--sun-deep);  --sun-t: var(--sun-soft);
  --coral-2: var(--coral-deep); --coral-t: var(--coral-soft);
  --mint-2: var(--mint-deep); --mint-t: var(--mint-soft);
  --lav: var(--lavender); --lav-2: var(--lavender-deep); --lav-t: var(--lavender-soft);
  --p1-t: var(--p1-soft); --p2-t: var(--p2-soft); --p3-t: var(--p3-soft); --p4-t: var(--p4-soft);
  --p1-2: var(--p1-deep); --p2-2: var(--p2-deep); --p3-2: var(--p3-deep); --p4-2: var(--p4-deep);
  --hint: var(--sun);
  --ok: var(--mint-deep);
  --fs-xs: var(--fs-small);
  --fs-s: 17px;
  --fs-m: var(--fs-body);
  --fs-l: var(--fs-h2);
  --fs-xl: var(--fs-h1);
  --fs-xxl: var(--fs-display);
  --tap-l: var(--tap);
  --gap: 12px;
  --pad: 16px;
  --shadow-card: var(--shadow-sticker);
  --shadow-soft: 0 12px 24px rgba(30, 42, 74, .10);
  --spring: var(--ease-spring);
  --dur-1: var(--t-fast);
  --dur-2: var(--t-base);
  --dur-3: var(--t-slow);

  color-scheme: light;
}

/* iPad & bigger */
.is-tablet {
  --fs-display: 52px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-tile: 26px;
  --fs-button: 24px;
  --fs-body: 22px;
  --fs-small: 17px;
  --fs-parent: 16px;
  --fs-number: 72px;
  --fs-tool: 200px;
  --fs-s: 19px;
  --tap-min: 60px;
  --tap: 72px;
  --gutter: 24px;
  --gap: 16px;
  --pad: 24px;
}

/* Kleine-Modus (active profile = Vorschule): bigger targets and text */
.is-small-mode {
  --tap: var(--tap-xl);
  --tap-min: 72px;
  --fs-body: calc(18px + 2px);
  --fs-button: calc(20px + 4px);
}
.is-tablet.is-small-mode { --fs-body: 24px; --fs-button: 28px; --tap: 96px; }

/* Nachtmodus (concept § 4.5.1) */
:root[data-theme="night"] {
  --paper: #171B2C;
  --paper-deep: #1F2539;
  --card: #262D45;
  --ink: #F3E9D4;
  --ink-soft: #C7BFAE;
  --ink-faint: #7E8197;
  --line: rgba(243, 233, 212, .14);
  --sky: #4D9FDB;  --sky-soft: #2A3E5C;  --sky-deep: #8CC4EE;
  --sun: #E3B341;  --sun-soft: #3F3A2F;  --sun-deep: #F0CF7A;
  --coral: #E5705F; --coral-soft: #4A2F33; --coral-deep: #F2A397;
  --mint: #33A98C; --mint-soft: #23413F; --mint-deep: #7FD4BC;
  --lavender: #9583D1; --lavender-soft: #353255; --lavender-deep: #C3B6EE;
  --warn: #E8833F;
  --focus: #F3E9D4;
  --edge: #0B0E18;
  --on-accent: #171B2C;
  --shadow-sticker: 0 5px 0 rgba(0, 0, 0, .4), 0 12px 24px rgba(0, 0, 0, .3);
  --shadow-press: 0 1px 0 rgba(0, 0, 0, .4);
  --shadow-float: 0 20px 44px rgba(0, 0, 0, .45);
  --shadow-piece: 0 3px 0 rgba(0, 0, 0, .45);
  --shadow-soft: 0 12px 24px rgba(0, 0, 0, .3);
  --ledge-c: rgba(0, 0, 0, .45);
  color-scheme: dark;
}