/* ==============================================================
   Schriften – selbst gehostet, kein CDN

   IBM Plex Sans (variabel, Gewicht 100–700) für Text, IBM Plex Mono für
   Zahlen und Beschriftungen. Beide SIL OFL 1.1, siehe fonts/LICENSE.txt.

   Vorher lief die App in der jeweiligen Systemschrift: Segoe UI auf
   Windows, Roboto auf Android, SF Pro auf dem iPhone – dieselbe App sah
   auf jedem Gerät anders aus. Der variable Schnitt deckt alle Gewichte
   in einer Datei ab, deshalb nur zwei Anfragen statt fünf.

   font-display: swap – der Text ist sofort in der Systemschrift lesbar
   und wird nachgezogen. Für Fahrer mit schlechtem Netz wichtiger als
   ein einheitlicher erster Frame.
   ============================================================== */
@font-face {
    font-family: "IBM Plex Sans Var";
    src: url("fonts/IBMPlexSansVar-Roman.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==============================================================
   Fahrtenbuch SV Frisia 03 – Design-Tokens
   Einzige Quelle für Farben, Radien, Schatten und Schriftgrößen.
   Wird VOR style.css und admin.css eingebunden.

   Aufbau:
     1. Helles Theme auf :root
     2. Dunkles Theme über prefers-color-scheme (Systemeinstellung)
     3. Dieselben Werte noch einmal über [data-theme] – das ist der
        manuelle Umschalter und muss die Systemeinstellung in BEIDE
        Richtungen überstimmen können.

   Vereinsfarben bleiben unangetastet: Schwarz und Frisia-Gelb #FFD500.
   Neu ist, dass die Grautöne einen warmen Stich haben – auf kaltem
   Blaugrau wirkt das Gelb wie ein Fremdkörper.

   Regel: Gelb ist Akzent, niemals Statusfarbe. Was "Achtung" bedeutet,
   benutzt --col-warn, sonst kann der Fahrer beides nicht auseinanderhalten.
   ============================================================== */

:root {
    color-scheme: light;

    /* ---- Flächen ---- */
    --bg:           #FAF9F5;
    --bg-sunken:    #F2F0E8;
    --surface:      #FFFFFF;
    --surface-2:    #F6F5EF;
    --surface-3:    #EDEBE2;

    /* ---- Text ---- */
    --text:         #16150F;
    --text-2:       #55534A;
    --text-3:       #8A877B;

    /* ---- Linien ---- */
    --border:       #E3E0D6;
    --border-soft:  #EDEBE2;
    --border-strong:#CFCBBD;

    /* ---- Akzent (Vereinsgelb) ---- */
    --accent:        #FFD500;
    --accent-strong: #E8C000;
    --accent-ink:    #16150F;   /* Textfarbe AUF gelbem Grund */
    --accent-quiet:  #FFF9DB;   /* gelb angehauchte Fläche */
    --accent-text:   #7A6100;   /* gelber Ton, der auf Hell noch lesbar ist */

    /* ---- Statusfarben (strikt getrennt vom Akzent) ---- */
    --ok:            #2E7D46;
    --ok-bg:         #E6F1E7;
    --ok-border:     #BFDDC6;
    --warn:          #B26B00;
    --warn-bg:       #FBEFD9;
    --warn-border:   #EFD4A3;
    --alert:         #C0392B;
    --alert-bg:      #FAE6E3;
    --alert-border:  #EFC3BC;
    --info:          #1E4E8C;
    --info-bg:       #E7EEF8;
    --info-border:   #C3D6EE;

    /* ---- Primärer Button: schwarz mit gelber Schrift ---- */
    --btn-bg:        #16150F;
    --btn-fg:        #FFD500;
    --btn-bg-hover:  #FFD500;
    --btn-fg-hover:  #16150F;

    /* ---- Sidebar (Verwaltung) ---- */
    --side-bg:       #16150F;
    --side-fg:       rgba(250,249,245,.72);
    --side-fg-hover: #FFFFFF;
    --side-hover:    rgba(255,255,255,.06);
    --side-active:   rgba(255,213,0,.13);

    /* ---- Form & Fokus ---- */
    --ring:          0 0 0 3px rgba(255,213,0,.45);
    --ring-alert:    0 0 0 3px rgba(192,57,43,.28);

    /* ---- Radien ---- */
    --r-sm:  8px;
    --r:     11px;
    --r-lg:  16px;
    --r-xl:  20px;
    --r-full: 999px;

    /* ---- Schatten: flach und weich statt hart abgesetzt ---- */
    --shadow-1: 0 1px 2px rgba(22,21,15,.05);
    --shadow-2: 0 1px 2px rgba(22,21,15,.05), 0 10px 24px -16px rgba(22,21,15,.35);
    --shadow-3: 0 24px 60px -28px rgba(22,21,15,.45);
    /* Alt-Name, wird in beiden Stylesheets noch benutzt */
    --shadow:   var(--shadow-2);

    /* ---- Schrift ---- */
    /* Die Systemschriften bleiben als Rückfall stehen: solange die woff2
       lädt (font-display: swap) oder falls sie fehlt, ist alles lesbar. */
    --font: "IBM Plex Sans Var", -apple-system, BlinkMacSystemFont, "Segoe UI",
            system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Zahlen laufen in Monospace: km-Stände, Uhrzeiten und Kennzeichen
       stehen so in Spalten untereinander und springen beim Tippen nicht. */
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
                 Menlo, Consolas, "Liberation Mono", monospace;

    --fs-base: 17px;
    --fs-big:  30px;
    --fs-h1:   27px;

    --select-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A877B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");

    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ===== Dunkles Theme ===== */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg:           #131310;
        --bg-sunken:    #0E0E0C;
        --surface:      #1C1C18;
        --surface-2:    #24241F;
        --surface-3:    #2C2C26;

        --text:         #F4F2EA;
        --text-2:       #A5A296;
        --text-3:       #767368;

        --border:       #302F29;
        --border-soft:  #26251F;
        --border-strong:#403E36;

        --accent-strong: #FFE04D;
        --accent-quiet:  #2A2617;
        --accent-text:   #FFD500;

        --ok:            #6BBF7F;
        --ok-bg:         #1B2A1F;
        --ok-border:     #2F4A38;
        --warn:          #E0A54A;
        --warn-bg:       #2C2318;
        --warn-border:   #4A3A22;
        --alert:         #E8776A;
        --alert-bg:      #2E1D1A;
        --alert-border:  #4C2C26;
        --info:          #7FB0EC;
        --info-bg:       #17222F;
        --info-border:   #2A3E58;

        /* Auf dunklem Grund dreht sich der Primärbutton um: gelb mit
           schwarzer Schrift – schwarz auf schwarz wäre unsichtbar. */
        --btn-bg:        #FFD500;
        --btn-fg:        #16150F;
        --btn-bg-hover:  #FFE04D;
        --btn-fg-hover:  #16150F;

        --side-bg:       #0E0E0C;
        --side-fg:       rgba(244,242,234,.68);

        --shadow-1: 0 1px 2px rgba(0,0,0,.4);
        --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.8);
        --shadow-3: 0 24px 60px -28px rgba(0,0,0,.9);

        --select-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A5A296' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    }
}

/* ===== Manueller Umschalter ===== */
/* Muss beide Richtungen erzwingen können, deshalb sind beide Themes
   noch einmal vollständig ausgeschrieben. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #131310; --bg-sunken: #0E0E0C;
    --surface: #1C1C18; --surface-2: #24241F; --surface-3: #2C2C26;
    --text: #F4F2EA; --text-2: #A5A296; --text-3: #767368;
    --border: #302F29; --border-soft: #26251F; --border-strong: #403E36;
    --accent-strong: #FFE04D; --accent-quiet: #2A2617; --accent-text: #FFD500;
    --ok: #6BBF7F; --ok-bg: #1B2A1F; --ok-border: #2F4A38;
    --warn: #E0A54A; --warn-bg: #2C2318; --warn-border: #4A3A22;
    --alert: #E8776A; --alert-bg: #2E1D1A; --alert-border: #4C2C26;
    --info: #7FB0EC; --info-bg: #17222F; --info-border: #2A3E58;
    --btn-bg: #FFD500; --btn-fg: #16150F;
    --btn-bg-hover: #FFE04D; --btn-fg-hover: #16150F;
    --side-bg: #0E0E0C; --side-fg: rgba(244,242,234,.68);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.8);
    --shadow-3: 0 24px 60px -28px rgba(0,0,0,.9);
    --select-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A5A296' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #FAF9F5; --bg-sunken: #F2F0E8;
    --surface: #FFFFFF; --surface-2: #F6F5EF; --surface-3: #EDEBE2;
    --text: #16150F; --text-2: #55534A; --text-3: #8A877B;
    --border: #E3E0D6; --border-soft: #EDEBE2; --border-strong: #CFCBBD;
    --accent-strong: #E8C000; --accent-quiet: #FFF9DB; --accent-text: #7A6100;
    --ok: #2E7D46; --ok-bg: #E6F1E7; --ok-border: #BFDDC6;
    --warn: #B26B00; --warn-bg: #FBEFD9; --warn-border: #EFD4A3;
    --alert: #C0392B; --alert-bg: #FAE6E3; --alert-border: #EFC3BC;
    --info: #1E4E8C; --info-bg: #E7EEF8; --info-border: #C3D6EE;
    --btn-bg: #16150F; --btn-fg: #FFD500;
    --btn-bg-hover: #FFD500; --btn-fg-hover: #16150F;
    --side-bg: #16150F; --side-fg: rgba(250,249,245,.72);
    --shadow-1: 0 1px 2px rgba(22,21,15,.05);
    --shadow-2: 0 1px 2px rgba(22,21,15,.05), 0 10px 24px -16px rgba(22,21,15,.35);
    --shadow-3: 0 24px 60px -28px rgba(22,21,15,.45);
    --select-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A877B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

/* ==============================================================
   Alt-Namen
   style.css und admin.css benutzen an vielen Stellen noch die
   ursprünglichen --col-*-Variablen. Sie zeigen jetzt auf die Tokens
   oben, damit auch nicht umgestellte Regeln automatisch das dunkle
   Theme mitmachen.
   ============================================================== */
:root {
    --col-primary:     var(--text);
    --col-primary-dk:  var(--text);
    --col-accent:      var(--accent);
    --col-accent-dk:   var(--accent-strong);
    --col-bg:          var(--bg);
    --col-card:        var(--surface);
    --col-card-hover:  var(--surface-2);
    --col-card-active: var(--surface-3);
    --col-text:        var(--text);
    --col-muted:       var(--text-2);
    --col-mute:        var(--text-3);
    --col-border:      var(--border);

    --col-ok:        var(--ok);
    --col-ok-bg:     var(--ok-bg);
    --col-warn:      var(--warn);
    --col-warn-bg:   var(--warn-bg);
    --col-alert:     var(--alert);
    --col-alert-bg:  var(--alert-bg);
    --col-info-bg:   var(--info-bg);
    --col-link:      var(--info);
}