/*
 * Aussehen der AIS Tracker für die sieben Seiten des Moduls passkey-access (Anmelden, Einrichtung, Zugang anfragen,
 * Warten, Wiederherstellung, Wiederherstellungscodes, Zugang), aus css/app.css: Fläche, Tinte, Orange als Linkfarbe,
 * Knöpfe und Felder wie in der App, die Schrift Geist (ux/02). Das Modul lädt diese Datei ohne Anmeldung nach seinen
 * eigenen Standardwerten (passkey-access/README.md, „Aussehen“). Name, Link zurück und Farbschema stehen in
 * api-defaults.properties (auth.*). Die Karte der Seite steht wie das Panel der App heller als ihre Umgebung: hell auf
 * der Feldfarbe, dunkel auf der des Panels. access-theme.test.mjs prüft, dass die Werte zu app.css passen.
 */

/* Dieselbe Datei wie in app.css; ohne Anmeldung erreichbar über auth.public-paths */
@font-face {
    font-family: "Geist";
    src: url("/vendor/geist/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --access-background: #f3f4f6; /* --fill */
    --access-surface: #ffffff;    /* --bg */
    --access-text: #0b0f14;       /* --fg */
    --access-muted: #5f6670;      /* --muted */
    --access-accent: #c2410c;     /* --link (hell gleich --accent) */
    --access-on-accent: #ffffff;
    --access-border: #e5e7eb;     /* --line */
    --access-danger: #b91c1c;     /* --bad */
    --access-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; /* --font */
    /* Knöpfe wie .action (Tinte auf Fläche) und „Verwerfen“ der Seite „Datenqualität“, Felder sichtbar auf der Karte */
    --access-primary: #0b0f14;    /* --fg */
    --access-on-primary: #ffffff; /* --bg */
    --access-secondary: #f3f4f6;  /* --fill */
    --access-on-secondary: #0b0f14; /* --fg */
    --access-secondary-border: #f3f4f6; /* --fill, also kein eigener Rand */
    --access-field: #ffffff;      /* --bg, der Grund der Karte */
    --access-field-border: #8a929b; /* --faint */
    --access-radius: 12px;        /* wie .action */
    --access-card-radius: 20px;   /* wie das Panel */
    --access-card-shadow: 0 4px 24px rgba(11, 15, 20, 0.12); /* --shadow */
}

/* Dunkel mit dunklem Gerät, außer die App hat „Hell“ gewählt; mit „Dunkel“ in der App auch bei hellem Gerät. Das Modul
   setzt data-access-theme aus ais-tracker.theme (auth.theme-storage-key). Beide Blöcke tragen dieselben Werte. */
@media (prefers-color-scheme: dark) {
    :root:not([data-access-theme="light"]) {
        --access-background: #151b22; /* --bg */
        --access-surface: #1f2730;    /* --fill */
        --access-text: #eef2f6;       /* --fg */
        --access-muted: #9ba6b2;      /* --muted */
        --access-accent: #fb923c;     /* --link */
        --access-on-accent: #0b0f14;  /* dunkle Schrift auf Orange, wie hell die weiße */
        --access-border: #2a333d;     /* --line */
        --access-danger: #f87171;     /* --bad */
        --access-primary: #eef2f6;    /* --fg */
        --access-on-primary: #151b22; /* --bg */
        --access-secondary: #36404b;  /* --raised, heller als die Karte */
        --access-on-secondary: #eef2f6; /* --fg */
        --access-secondary-border: #36404b; /* --raised, also kein eigener Rand */
        --access-field: #1f2730;      /* --fill, der Grund der Karte */
        --access-field-border: #6b7682; /* --faint */
        --access-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); /* --shadow */
    }
}

:root[data-access-theme="dark"] {
    --access-background: #151b22; /* --bg */
    --access-surface: #1f2730;    /* --fill */
    --access-text: #eef2f6;       /* --fg */
    --access-muted: #9ba6b2;      /* --muted */
    --access-accent: #fb923c;     /* --link */
    --access-on-accent: #0b0f14;  /* dunkle Schrift auf Orange, wie hell die weiße */
    --access-border: #2a333d;     /* --line */
    --access-danger: #f87171;     /* --bad */
    --access-primary: #eef2f6;    /* --fg */
    --access-on-primary: #151b22; /* --bg */
    --access-secondary: #36404b;  /* --raised, heller als die Karte */
    --access-on-secondary: #eef2f6; /* --fg */
    --access-secondary-border: #36404b; /* --raised, also kein eigener Rand */
    --access-field: #1f2730;      /* --fill, der Grund der Karte */
    --access-field-border: #6b7682; /* --faint */
    --access-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); /* --shadow */
}