/*! tokens.css — the design tokens every theme sets, and the two classic looks (Dark, Light).

   What it does: defines the CSS custom properties that components.css reads. A theme is ONLY a block of
   these variables under [data-theme=<key>]; components never hard-code a colour.
   Load order: tokens.css → themes.css → themes-games.css → components.css (index.html / demo.html show it).
   Main tokens:
     --bg, --surface, --surface-2, --surface-hover, --chrome, --input-bg   page, panels, menus, fields
     --line, --line-strong                                                   borders
     --ink, --ink-2, --muted, --heading                                      text
     --accent, --accent-soft                                                 the ONE plain accent
     --primary, --on-primary                                                 main button (always a solid colour)
     --trim, --trim-rgb, --on-trim                                           theme trim (menu bar, badges, ticks)
     --danger, --warn, --ok, --info                                          status: must stay distinct in every theme
     --shadow, --radius, --radius-sm, --pattern, --pattern-size              finish
     --font, --font-display, --font-mono                                     body / headings / codes
   Gotchas: body text always uses --font (readable tables); only headings take --font-display. Fonts are
   system fonts with fallbacks, nothing is downloaded. Printing always comes out black on white (bottom). */

:root, [data-theme] {
    --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --radius: 10px;
    --radius-sm: 7px;
    --pattern: none;
    --pattern-size: auto;

    /* Dark (default) */
    --bg: #0f141b;
    --surface: #161c25;
    --surface-2: #1d2531;
    --surface-hover: rgba(90, 169, 230, .07);
    --chrome: #12171f;
    --input-bg: #0f141b;
    --line: #273140;
    --line-strong: #364253;
    --ink: #e7eefa;
    --ink-2: #b8c4d8;
    --muted: #8391ab;
    --heading: #e7eefa;
    --accent: #5aa9e6;
    --accent-soft: rgba(90, 169, 230, .12);
    --primary: #2f7fc1;
    --on-primary: #ffffff;
    --trim: #5aa9e6;
    --trim-rgb: 90 169 230;
    --on-trim: #0f141b;
    --danger: #fb7185;
    --warn: #fbbf24;
    --ok: #34d399;
    --info: #60a5fa;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

[data-theme=light] {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f2f5fa;
    --surface-hover: rgba(8, 145, 178, .06);
    --chrome: #ffffff;
    --input-bg: #ffffff;
    --line: #dde1e7;
    --line-strong: #c4cad3;
    --ink: #0b1324;
    --ink-2: #334155;
    --muted: #64748b;
    --heading: #0b1324;
    --accent: #0e7490;
    --accent-soft: rgba(8, 145, 178, .1);
    --primary: #0e7490;
    --on-primary: #ffffff;
    --trim: #0e7490;
    --trim-rgb: 14 116 144;
    --on-trim: #ffffff;
    --danger: #e11d48;
    --warn: #b45309;
    --ok: #047857;
    --info: #2563eb;
    --shadow: 0 1px 2px rgba(15, 23, 42, .08);
    color-scheme: light;
}

/* Printed documents (contracts, invoices, handover sheets) are black on white whatever the theme. */
@media print {
    :root, [data-theme] {
        --bg: #fff; --surface: #fff; --surface-2: #fff; --chrome: #fff; --input-bg: #fff;
        --line: #000; --line-strong: #000; --ink: #000; --ink-2: #000; --muted: #333; --heading: #000;
        --accent: #000; --primary: #fff; --on-primary: #000; --trim: #000; --on-trim: #fff;
        --shadow: none; --pattern: none;
        color-scheme: light;
    }
    body { background: #fff !important; color: #000 !important; }
    body::before, .no-print, .theme-btn, .sidebar { display: none !important; }
}