/*
 * Design-Tokens (Stil "modern": Tannengrün als Grundfarbe, Messing/Gold als Akzent, Spieltisch mit Filz und Holzrand).
 * Light ist der Standard; Dark gilt bei prefers-color-scheme: dark oder mit <html data-theme="dark">.
 * <html data-theme="light"> erzwingt Light, auch wenn das System Dark meldet.
 * Nur hier stehen Farbwerte; alle übrigen CSS-Dateien (auch account.css des Servers) nutzen var(--…) (Test ColorTokenTests).
 * Kontrast (WCAG AA, mind. 4.5:1): Text/Hintergrund, Text/Fläche, Akzent-Text/Akzent-Fläche, Text auf dem Filz,
 * geprüft im Unit-Test ColorTokenTests und im E2E-Test ThemeTests.
 * Breakpoint Phone/Desktop: 768px (CSS kann var() nicht in Media-Queries nutzen, siehe layout.css).
 */

:root {
    color-scheme: light dark;

    /* Typografie. Inter (OFL) wird selbst gehostet, sobald die Schriftdatei unter fonts/ liegt (siehe fonts/README.md). */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-small: 0.875rem;
    --font-size-h1: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
    --font-size-h2: 1.25rem;
    --line-height-base: 1.5;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    --letter-spacing-tight: -0.01em;

    /* Radien */
    --radius-s: 0.375rem;
    --radius-m: 0.75rem;
    --radius-l: 1.25rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    /* Abstände */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Layout */
    --nav-tabs-height: 3.5rem;
    --nav-sidebar-width: 15rem;
    --focus-ring-width: 3px;

    /* Übergänge (bei prefers-reduced-motion in base.css abgeschaltet) */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: 0.15s var(--ease-out);
    --transition-base: 0.25s var(--ease-out);

    /* Farben: Light */
    --color-bg: #f3f1ea;
    --color-surface: #ffffff;
    --color-surface-muted: #ebe8de;
    --color-text: #14261d;
    --color-text-muted: #46564c;
    --color-border: #cfd3c8;
    --color-primary: #1f5a42;
    --color-on-primary: #ffffff;
    --color-accent: #c9a24a;
    --color-accent-strong: #b08a33;
    --color-on-accent: #0f2a1f;
    --color-focus: #8a6414;
    /* Gefährliche Aktionen (Konto löschen) und Fehlerhinweise. */
    --color-danger: #b3261e;
    --color-on-danger: #ffffff;
    /* Teams am Tisch: eigenes Team Messing (wie der Akzent), Gegner Blau. Text darauf jeweils dunkel bzw. hell. */
    --color-team-own: #c9a24a;
    --color-team-own-soft: rgb(201 162 74 / 0.22);
    --color-on-team-own: #2a2109;
    --color-team-other: #3f74c4;
    --color-team-other-soft: rgb(63 116 196 / 0.2);
    --color-on-team-other: #ffffff;
    /* Holztisch rund um den Filz (Spieltisch). */
    --color-wood: #b98a57;
    --color-wood-light: #d1a46d;
    --color-wood-dark: #8f6234;
    --color-wood-grain: rgb(86 50 18 / 0.13);
    --table-wood-texture:
        repeating-linear-gradient(176deg, var(--color-wood-grain) 0 2px, transparent 2px 11px),
        repeating-linear-gradient(184deg, var(--color-wood-grain) 0 1px, transparent 1px 17px),
        radial-gradient(ellipse at 30% 20%, var(--color-wood-light) 0%, transparent 60%),
        linear-gradient(180deg, var(--color-wood) 0%, var(--color-wood-dark) 100%);
    --color-nav-bg: #ffffff;
    --color-overlay: rgb(10 26 19 / 0.5);
    --color-shadow: rgb(15 42 31 / 0.18);

    /* Kartenfläche bleibt in beiden Modi hell, damit Rot/Schwarz lesbar sind. */
    --color-card-face: #fffdf7;
    --color-card-border: #8f968c;
    --color-card-red: #b3261e;
    --color-card-black: #14261d;

    /* QR-Code der Zwei-Faktor-Einrichtung braucht in beiden Modi weissen Grund (Lesbarkeit für Kameras). */
    --color-qr-bg: #ffffff;

    /* Knopf „Mit Apple anmelden“ nach Apples Gestaltungsregeln: schwarz auf hellem, weiss auf dunklem Grund (JAS-14). */
    --color-apple-bg: #000000;
    --color-apple-text: #ffffff;

    /* Kartenrückseite: in beiden Modi gleich (dunkles Tannengrün mit Messing), mit hellem Rand, damit sie auf Filz und Fläche abhebt. */
    --color-card-back: #1a4a36;
    --color-card-back-pattern: #2f6b50;
    --color-card-back-frame: #c9a24a;
    --color-card-back-edge: #fffdf7;

    /* Spieltisch: Filz (Verlauf + feines Muster nur per CSS), Holzrand, Text auf dem Filz */
    --color-table-felt: #276b4a;
    --color-table-felt-deep: #1b5338;
    --color-table-felt-light: #2c7652;
    --color-table-rim: #7a5230;
    --color-table-rim-light: #a2744a;
    --color-on-felt: #ffffff;
    --color-on-felt-muted: #e8f1ea;
    --color-felt-slot: rgb(255 255 255 / 0.35);
    --color-felt-glow: rgb(255 255 255 / 0.12);
    --table-felt-texture:
        radial-gradient(ellipse at 50% 35%, var(--color-table-felt-light) 0%, transparent 65%),
        repeating-linear-gradient(45deg, var(--color-felt-glow) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, var(--color-table-felt) 0%, var(--color-table-felt-deep) 100%);

    /* Spielende */
    --color-confetti-1: #c9a24a;
    --color-confetti-2: #b3261e;
    --color-confetti-3: #2f7a5a;
    --color-confetti-4: #fffdf7;

    /* Schatten */
    --shadow-s: 0 1px 2px rgb(15 42 31 / 0.16);
    --shadow-m: 0 4px 12px rgb(15 42 31 / 0.18);
    --shadow-l: 0 12px 32px rgb(15 42 31 / 0.24);
    --shadow-card: 0 2px 6px rgb(0 0 0 / 0.28);
    --shadow-inset-felt: inset 0 0 2.5rem rgb(0 0 0 / 0.35);

    /* Filz-Textur der Seiten nur per Gradient, keine Bilddatei */
    --texture-felt: radial-gradient(circle at 20% 0%, rgb(255 255 255 / 0.5), transparent 60%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #0f2a1f;
        --color-surface: #173a2c;
        --color-surface-muted: #12301f;
        --color-text: #f1ece0;
        --color-text-muted: #b9c4bb;
        --color-border: #2c5442;
        --color-primary: #2f7a5a;
        --color-on-primary: #ffffff;
        --color-accent: #c9a24a;
        --color-accent-strong: #ddb85e;
        --color-on-accent: #0f2a1f;
        --color-focus: #e6c36b;
        --color-danger: #f28b82;
        --color-on-danger: #2a0b08;
        --color-team-own: #d6b05a;
        --color-team-own-soft: rgb(214 176 90 / 0.24);
        --color-on-team-own: #1f1806;
        --color-team-other: #6c9ce6;
        --color-team-other-soft: rgb(108 156 230 / 0.22);
        --color-on-team-other: #0b1a33;
        --color-wood: #6b4626;
        --color-wood-light: #82582f;
        --color-wood-dark: #4a2f18;
        --color-wood-grain: rgb(0 0 0 / 0.18);
        --color-nav-bg: #0b2018;
        --color-overlay: rgb(0 0 0 / 0.6);
        --color-shadow: rgb(0 0 0 / 0.5);
        --color-apple-bg: #ffffff;
        --color-apple-text: #000000;

        --color-table-felt: #1d5a3e;
        --color-table-felt-deep: #113826;
        --color-table-felt-light: #276b4b;
        --color-table-rim: #4a301b;
        --color-table-rim-light: #6b4728;
        --color-on-felt: #f1ece0;
        --color-on-felt-muted: #d3dfd6;
        --color-felt-slot: rgb(241 236 224 / 0.3);
        --color-felt-glow: rgb(255 255 255 / 0.06);

        --shadow-s: 0 1px 2px rgb(0 0 0 / 0.5);
        --shadow-m: 0 4px 12px rgb(0 0 0 / 0.5);
        --shadow-l: 0 12px 32px rgb(0 0 0 / 0.6);
        --shadow-card: 0 2px 6px rgb(0 0 0 / 0.55);
        --shadow-inset-felt: inset 0 0 2.5rem rgb(0 0 0 / 0.55);
        --texture-felt: radial-gradient(circle at 20% 0%, rgb(255 255 255 / 0.07), transparent 60%);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0f2a1f;
    --color-surface: #173a2c;
    --color-surface-muted: #12301f;
    --color-text: #f1ece0;
    --color-text-muted: #b9c4bb;
    --color-border: #2c5442;
    --color-primary: #2f7a5a;
    --color-on-primary: #ffffff;
    --color-accent: #c9a24a;
    --color-accent-strong: #ddb85e;
    --color-on-accent: #0f2a1f;
    --color-focus: #e6c36b;
    --color-danger: #f28b82;
    --color-on-danger: #2a0b08;
    --color-team-own: #d6b05a;
    --color-team-own-soft: rgb(214 176 90 / 0.24);
    --color-on-team-own: #1f1806;
    --color-team-other: #6c9ce6;
    --color-team-other-soft: rgb(108 156 230 / 0.22);
    --color-on-team-other: #0b1a33;
    --color-wood: #6b4626;
    --color-wood-light: #82582f;
    --color-wood-dark: #4a2f18;
    --color-wood-grain: rgb(0 0 0 / 0.18);
    --color-nav-bg: #0b2018;
    --color-overlay: rgb(0 0 0 / 0.6);
    --color-shadow: rgb(0 0 0 / 0.5);
    --color-apple-bg: #ffffff;
    --color-apple-text: #000000;

    --color-table-felt: #1d5a3e;
    --color-table-felt-deep: #113826;
    --color-table-felt-light: #276b4b;
    --color-table-rim: #4a301b;
    --color-table-rim-light: #6b4728;
    --color-on-felt: #f1ece0;
    --color-on-felt-muted: #d3dfd6;
    --color-felt-slot: rgb(241 236 224 / 0.3);
    --color-felt-glow: rgb(255 255 255 / 0.06);

    --shadow-s: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-m: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-l: 0 12px 32px rgb(0 0 0 / 0.6);
    --shadow-card: 0 2px 6px rgb(0 0 0 / 0.55);
    --shadow-inset-felt: inset 0 0 2.5rem rgb(0 0 0 / 0.55);
    --texture-felt: radial-gradient(circle at 20% 0%, rgb(255 255 255 / 0.07), transparent 60%);
}

:root[data-theme="light"] {
    color-scheme: light;
}