/*
 * VAS Designsystem – Tokens und Grundlagen (Redesign Phase 3).
 *
 * Dunkel, Nachtblau, Logo-Cyan als einziger Akzent. Werte aus
 * docs/plans/redesign/konzept-v8.html (Abschnitt "Dunkel, blau, …").
 * Gilt für die neuen Seiten (App-Hülle /app, UI-Katalog). Die alten Seiten
 * behalten ihre eigenen Token-Sätze, bis sie umgezogen sind.
 *
 * Schriften selbst gehostet (static/fonts/, keine Google-Anfragen).
 */

@font-face { font-family: "Saira"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("/static/fonts/saira-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Saira"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("/static/fonts/saira-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Saira"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("/static/fonts/saira-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Saira"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("/static/fonts/saira-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Saira"; font-weight: 700; font-style: normal; font-display: swap;
    src: url("/static/fonts/saira-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Saira"; font-weight: 700; font-style: normal; font-display: swap;
    src: url("/static/fonts/saira-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("/static/fonts/IBMPlexSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("/static/fonts/IBMPlexSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("/static/fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap;
    src: url("/static/fonts/IBMPlexSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("/static/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("/static/fonts/IBMPlexMono-Medium.ttf") format("truetype"); }

:root {
    color-scheme: dark;

    /* Flächen: Grund -> erhaben */
    --ink-0: #050913;
    --ink-1: #08101f;
    --ink-2: #0c1629;
    --ink-3: #122036;
    --ink-4: #1a2b47;
    --line: #1c2b46;
    --line-2: #2a3e62;

    /* Text */
    --fg: #e3eaf4;
    --fg-2: #a2b1c7;
    --fg-3: #6c7f9b;

    /* Akzent: einzig für Auswahl, Fokus, aktiv */
    --signal: #2ecfff;
    --signal-soft: rgba(46, 207, 255, 0.14);

    /* Kategorien (zusätzlich immer Symbol + Kachelform) */
    --cam: #2ecfff;
    --kassa: #a68cff;
    --screen: #ffa552;

    /* Status (nie nur Farbe: immer Punkt/Symbol + Text) */
    --ok: #3ddc97;
    --warn: #f5c542;
    --bad: #ff5f6d;
    --rest: #6f93c4;
    --rest-fg: #a9c3e6;
    --maint: #9db1ff;
    --idle: #6c7f9b;

    /* Diagramm-Serien */
    --s1: #2ecfff; --s2: #6f8cff; --s3: #a68cff; --s4: #ff8fc8; --s5: #ffc27a; --s6: #7fd6c2;

    /* Schrift */
    --font-display: "Saira", "Segoe UI", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Maße */
    --radius-s: 6px;
    --radius: 10px;
    --radius-l: 14px;
    --touch: 44px;              /* Mindestgröße Touch-Ziel */
    --gap: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --focus: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--signal);

    /* Safe Areas (Notch, Home-Leiste) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.vas {
    margin: 0;
    background: var(--ink-0);
    color: var(--fg);
    font: 400 15px/1.45 var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.vas h1, .vas h2, .vas h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
}

.vas a { color: var(--signal); text-decoration: none; }
.vas a:hover { text-decoration: underline; }

.vas :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }

.vas .mono, .vas time, .vas code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.vas .muted { color: var(--fg-2); }
.vas .faint { color: var(--fg-3); }

.vas button { font: inherit; color: inherit; }

.vas .vas-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 36px; padding: 0 14px;
    background: var(--ink-3); color: var(--fg);
    border: 1px solid var(--line-2); border-radius: var(--radius-s);
    cursor: pointer; white-space: nowrap;
}
.vas .vas-btn:hover { background: var(--ink-4); }
.vas .vas-btn.primary { background: var(--signal); color: #04121c; border-color: var(--signal); font-weight: 600; }
.vas .vas-btn.primary:hover { filter: brightness(1.08); }
.vas .vas-btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.vas .vas-btn.ghost:hover { background: var(--ink-3); color: var(--fg); }
.vas .vas-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.vas [hidden] { display: none !important; }
@media (pointer: coarse) { .vas .vas-btn { min-height: var(--touch); } }

.vas .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vas svg.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
    .vas *, .vas *::before, .vas *::after { animation-duration: 0.01ms !important; transition: none !important; }
}