/*
 * Design-Tokens „Slate & Neon“ nach dem Design-Export requirments/Terminplaner.html (Werte exakt
 * daraus, Begründung und Kontrasttabelle: docs/design/farbschema/README.md).
 *
 * Slate #1e293b für Überschriften, Labels, Kopfband und alles Gewählte; Text #1f2933; Neon #ccff00
 * nur als Fläche mit Schrift #0f172a – nie als Schrift auf Hell (1,18:1). Grund #f4f7f8, Karten weiß.
 * Oliv #5c6b00 nur auf der Neon-Tönung #f7fdcc (Pille „gebucht“, „Neu“).
 *
 * Der Export hat nur Hell. Dunkel ist daraus abgeleitet (Entscheidung Product Owner 2026-10-18):
 * Slate wird Grund und Fläche, Neon wird Akzent. Liefert das Design später einen, wird er ersetzt.
 *
 * Rahmen von Feldern und Knöpfen haben 3:1 zur Fläche (WCAG 1.4.11, Entscheidung 2026-10-18) –
 * zarter als im Export (#e3e8ea, 1,24:1).
 *
 * Schrift: Manrope, lokal mitgeliefert (SIL Open Font License 1.1, fonts/OFL.txt), damit kein fremder
 * Server den privaten Link sieht und die App ohne Netz startet.
 */

:root {
    color-scheme: light dark;

    /* Hell – alles aus dem Export */
    --color-bg: #f4f7f8;                    /* Inhaltsgrund der Screens */
    --color-bg-deep: #ffffff;               /* Eingabefelder: weiß auf weißer Karte, Rahmen trennt */
    --color-surface: #ffffff;               /* Karten, Tabbar */
    --color-surface-raised: #eef2f3;        /* Pille „frei", Avatar, gewählter Tag, aktive Navigation */
    --color-text: #1f2933;
    --color-text-muted: #5c6b80;            /* Export #64748b hat auf #f4f7f8 nur 4,42:1 – minimal dunkler */
    --color-hairline: #edf1f2;              /* Kartenrand */
    --color-hairline-strong: #8a979e;       /* Feld- und Knopfrahmen: 3,00:1 auf Weiß (Export #e3e8ea, 1,24:1) */
    --color-label: #1e293b;                 /* Abschnitts-Labels in Großbuchstaben: Slate */
    --color-accent: #1e293b;                /* Gewähltes (Tag, Dauer, Tab) ist im Export Slate, nicht Farbe */
    --color-accent-ink: #ffffff;
    --color-ball: #ccff00;
    --color-paper: #ffffff;
    --color-ink: #0f172a;
    --color-danger: #c0392b;
    --color-focus: #1e293b;

    --color-button-bg: var(--color-ball);
    --color-button-text: #0f172a;

    /* Kopfband, Neon-Tönung, Schatten */
    --color-header-bg: #1e293b;             /* Kopfband */
    /* Startbildschirm (F1.32) – gleich der background_color der Manifeste, aus der Android das Startbild
       der installierten App macht. Deshalb im Dunkelmodus NICHT überschrieben. */
    --color-splash: #1e293b;
    --color-header-text: #ffffff;
    --color-header-muted: #cbd5e1;          /* „Wähle einen freien Termin." im Band */
    --color-header-chip: rgb(255 255 255 / 0.16);   /* heller Chip im Band: Hover des Briefsymbols (F1.31.7) */
    --color-header-line: #cbd5e1;           /* Knopfrahmen im Band (F1.31.5) */
    --color-header-focus: #ccff00;          /* Hover-Rahmen und Fokusring im Band – Slate verschwände darauf (F1.31.6) */
    --color-button-bg-hover: #b8e600;       /* nicht im Export; Neon eine Stufe dunkler */
    --color-highlight: #5c6b00;             /* Oliv – Schrift auf der Neon-Tönung */
    --color-highlight-bg: #f7fdcc;          /* Neon-Tönung: „gebucht", „Neu", Hinweis */
    --color-highlight-line: #dfe98f;
    --color-danger-ink: #ffffff;            /* Schrift auf gefülltem Rot */
    --color-danger-line: #dc7064;           /* Rahmen des Absagen-Knopfs: 3,2:1 (Export #f0d4d4, 1,39:1) */
    --shadow-card: 0 1px 2px rgb(31 41 51 / 0.04), 0 6px 18px -12px rgb(31 41 51 / 0.25);
    --shadow-row: 0 4px 14px -12px rgb(31 41 51 / 0.3);
    --shadow-segment: 0 1px 3px rgb(31 41 51 / 0.14);
    --color-backdrop: rgb(20 35 38 / 0.45);

    /* Vermerke im Verlauf (messages R8.2): dezenter Grund, kräftige Schrift derselben Farbe – je ≥ 4,5:1 */
    --color-note-booked: #1e6b3a;           /* grün auf #e3f4e8: 5,7:1 */
    --color-note-booked-bg: #e3f4e8;
    --color-note-cancelled: #a3291c;        /* rot auf #fbe4e1: 6,0:1 */
    --color-note-cancelled-bg: #fbe4e1;
    --color-note-moved: #855600;            /* amber auf #fcefd0: 5,5:1 */
    --color-note-moved-bg: #fcefd0;

    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3.5rem;

    /* Höhe der Tabbar am Handy ohne Sicherheitsabstand unten – fest, damit die Eingabe im Verlauf
       genau darüber kleben kann (messages R6.15) */
    --tabbar-block-size: 4rem;

    /* Typografie: Manrope wie im Export, Überschriften 800 */
    --font-display: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --weight-display: 800;
    --font-size-xs: clamp(0.875rem, 0.6rem + 0.35vw, 1rem);   /* am Handy 14 px – darunter ist Kleingedrucktes */
    --font-size-sm: clamp(0.9375rem, 0.7rem + 0.45vw, 1.2rem);
    --font-size-md: clamp(1rem, 0.85rem + 0.55vw, 1.5rem);
    --font-size-lg: clamp(1.35rem, 1rem + 1.2vw, 2.4rem);
    --font-size-xl: clamp(2rem, 1.2rem + 2.4vw, 4.2rem);
    --font-size-name: clamp(1.7rem, 0.9rem + 3vw, 5.2rem);
    --tracking-label: 0.08em;               /* Export: 12px / 800 / .08em, Slate */

    /* Form: Export 11–13px Bedienelemente, 18px Karten, 8px Pillen */
    --radius-xs: 0.5rem;
    --radius-sm: 0.75rem;
    --radius-md: 1.125rem;
    --duration-fast: 160ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dunkel – abgeleitet, nicht im Export: Slate-Familie als Grund, Neon als Akzent */
        --color-bg: #0f172a;
        --color-bg-deep: #0b1220;
        --color-surface: #1e293b;
        --color-surface-raised: #273449;
        --color-text: #f1f5f9;
        --color-text-muted: #a3b1c2;
        --color-hairline: rgb(226 232 240 / 0.1);
        --color-hairline-strong: #6b7a8f;   /* 3,35:1 auf der Fläche */
        --color-label: #e2e8f0;
        --color-accent: #ccff00;
        --color-accent-ink: #0f172a;
        --color-danger: #f87171;
        --color-focus: #ccff00;
        --color-button-bg: var(--color-ball);
        --color-button-text: #0f172a;

        --color-header-bg: #0b1220;
        --color-header-text: #f1f5f9;
        --color-header-muted: #a3b1c2;
        --color-header-chip: rgb(255 255 255 / 0.12);
        --color-header-line: #a3b1c2;
        --color-header-focus: #ccff00;
        --color-button-bg-hover: #d9ff4d;
        --color-highlight: #ccff00;
        --color-highlight-bg: rgb(204 255 0 / 0.12);
        --color-highlight-line: rgb(204 255 0 / 0.35);
        --color-danger-ink: #0f172a;        /* Weiß auf hellem Rot hätte nur 2,8:1 */
        --color-danger-line: #f87171;
        --shadow-card: 0 0 0 1px rgb(226 232 240 / 0.06);
        --shadow-row: none;
        --shadow-segment: 0 1px 3px rgb(0 0 0 / 0.4);
        --color-backdrop: rgb(0 0 0 / 0.6);

        /* Vermerke (messages R8.2): Tönung über dem Grund #0f172a, helle Schrift – 9,6 / 7,6 / 9,3:1 */
        --color-note-booked: #86efac;
        --color-note-booked-bg: rgb(74 222 128 / 0.14);
        --color-note-cancelled: #fca5a5;
        --color-note-cancelled-bg: rgb(248 113 113 / 0.16);
        --color-note-moved: #fcd34d;
        --color-note-moved-bg: rgb(251 191 36 / 0.14);
    }
}