/**
 * FOC Design-Tokens — „Ruhige Präzision".
 *
 * Eine Quelle für Farbe, Typografie und Form im gesamten Mitgliedsbereich.
 * Muss vor allen Seiten-Stylesheets eingebunden werden; die Seiten-CSS
 * greifen über die Aliase (--surface-card, --text-body, --accent …) zu.
 */

:root {
    /* Brand — ein Rot, kühl und tief */
    --brand-50: #fde8ec;
    --brand-100: #f9d0d9;
    --brand-600: #b01030; /* Primary — Topbar, Buttons, Kicker, Links */
    --brand-700: #8c0d26; /* Hover / gedrückt */

    /* Neutrals — Slate, kühl */
    --ink-900: #0f172a; /* Headlines, Body-Emphasis, Ink-Panels */
    --ink-700: #334155; /* Fließtext stark */
    --ink-600: #475569; /* Fließtext sekundär */
    --ink-500: #64748b; /* Muted, Card-Beschreibungen */
    --ink-400: #94a3b8; /* Timestamps, Meta */
    --line-300: #cbd5e1; /* Borders Secondary-Button, Inputs */
    --line-200: #e2e8f0; /* Hairlines, Card-Borders */
    --bg-100: #f8fafc; /* Seitenhintergrund */
    --bg-200: #f1f5f9; /* Zebra, gedämpfte Flächen */
    --white: #ffffff;

    /* Semantik — Status und Monitoring. Regel: Brand-Rot ≠ Fehler-Rot */
    --ok-600: #16a34a;
    --ok-700: #047857;
    --ok-bg: #f0fdf4;
    --ok-border: #86efac;
    --warn-600: #d97706;
    --warn-700: #b45309;
    --warn-bg: #fffbeb;
    --warn-border: #fcd34d;
    --crit-600: #b91c1c;
    --crit-700: #991b1b;
    --crit-bg: #fef2f2;
    --crit-border: #fca5a5;
    --info-600: #1d4ed8;
    --info-bg: #eff6ff;
    --info-border: #93c5fd;

    /* Semantische Aliase */
    --surface-page: var(--bg-100);
    --surface-card: var(--white);
    --surface-ink: var(--ink-900);
    --surface-sunken: var(--bg-200);
    --text-heading: var(--ink-900);
    --text-body: var(--ink-600);
    /* --text-muted trägt Fließtext (Kartenbeschreibungen, Hinweise) und muss
       auf Weiß AA erfüllen; --text-meta ist die hellere Stufe für Zeitstempel
       und Mono-Labels, die nie allein eine Information tragen. */
    --text-muted: var(--ink-500);
    --text-meta: var(--ink-400);
    --border-card: var(--line-200);
    --border-input: var(--line-300);
    --accent: var(--brand-600);
    --accent-hover: var(--brand-700);
    --focus-ring: var(--ink-900);

    /* Typografie */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --text-h1: 42px;
    --lh-h1: 1.15;
    --ls-h1: -0.015em;
    --w-h1: 600;
    --text-h2: 28px;
    --lh-h2: 1.2;
    --ls-h2: -0.01em;
    --w-h2: 600;
    --text-h3: 20px;
    --lh-h3: 1.3;
    --w-h3: 600;
    --text-h4: 15px;
    --lh-h4: 1.35;
    --w-h4: 600;
    --text-base: 14px;
    --lh-body: 1.6;
    --text-caption: 12.5px;
    --lh-caption: 1.55;
    --text-mono: 12px;
    --lh-mono: 1.5;

    /* Mono-Systemsprache: Kicker, Panel-Header, Meta */
    --kicker-size: 11px;
    --kicker-ls: 0.1em;
    --panel-label-size: 9.5px;
    --panel-label-ls: 0.06em;
    --meta-size: 10.5px;

    /* 4er-Raster */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-14: 56px;

    /* Radien — knapp, technisch */
    --r-sm: 3px; /* Badges */
    --r-md: 4px; /* Buttons, Inputs */
    --r-lg: 6px; /* Karten, Kacheln */
    --r-full: 99px; /* Avatare, Pills */

    /* Elevation: Hairlines statt Schatten. Nur echte Overlays heben ab. */
    --border-hairline: 1px solid var(--line-200);
    --shadow-none: none;
    --shadow-overlay: 0 8px 24px -8px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.1);

    /* Layout */
    --page-pad-x: 40px;
    --content-max: 1140px;
    --topbar-h: 52px;
    --sidebar-w: 276px;
    --control-h: 40px; /* Buttons/Inputs Desktop; mobil min. 44px */
}

/* ——— Mono-Systemsprache: wiederkehrende Textrollen ——— */

.foc-kicker {
    font-family: var(--font-mono);
    font-size: var(--kicker-size);
    font-weight: 500;
    letter-spacing: var(--kicker-ls);
    text-transform: uppercase;
    color: var(--accent);
}

.foc-panel-label {
    font-family: var(--font-mono);
    font-size: var(--panel-label-size);
    font-weight: 500;
    letter-spacing: var(--panel-label-ls);
    text-transform: uppercase;
    color: var(--ink-400);
}

.foc-meta {
    font-family: var(--font-mono);
    font-size: var(--meta-size);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text-meta);
}

/* Zahlenkolonnen laufen nur bündig, wenn die Ziffern gleich breit sind. */
table,
.foc-tabular {
    font-variant-numeric: tabular-nums;
}

/* hidden muss hidden bleiben, auch wenn eine Komponentenregel display setzt. */
[hidden] {
    display: none !important;
}

/* ——— Fokus: ein Ring für alles ——— */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 899px) {
    :root {
        --page-pad-x: 20px;
        --text-h1: 30px;
        --text-h2: 22px;
        --control-h: 44px;
    }
}