/*
 * HAFA Controlling – Design Tokens
 *
 * Übernommen aus dem Entwurf "HAFA Controlling Dashboard" (Claude Design,
 * 19.08.2026). Einzige Stelle, an der Farben, Abstände, Schrift und Formen
 * festgelegt werden; Komponenten greifen ausschließlich auf diese Variablen zu.
 *
 * Die Markenfarbe #B31B23 ist ein gegenüber dem Logo-Rot (#E30713) abgedunkeltes
 * Rot. Das ist beabsichtigt: Auf hellen Flächen und in Diagrammen erreicht der
 * dunklere Ton ausreichenden Kontrast, während das Logo-Rot als Signalfarbe im
 * Logo selbst bleibt.
 */

:root {
    /* Marke – sparsam einsetzen: aktiver Navigationspunkt, primäre Aktionen, Planlinie */
    --brand-primary: #b31b23;
    --brand-primary-hover: #93151c;
    --brand-primary-soft: #fbeeec;
    --brand-primary-border: #f2d6d2;

    /* Flächen */
    --background: #f4f5f6;
    --surface: #ffffff;
    --surface-tint: #fcfcfd;
    --surface-muted: #f7f8f9;
    --surface-sunken: #f1f2f4;

    /* Text */
    --text-primary: #16191c;
    --text-strong: #1f2328;
    --text-secondary: #4a4f54;
    --text-muted: #6b7075;
    --text-faint: #8a9096;
    --text-subtle: #9aa0a6;
    --text-inverse: #ffffff;

    /* Linien */
    --border: #e3e5e8;
    --border-light: #eef0f1;
    --border-strong: #dcdfe2;
    --border-hover: #c9cdd1;

    /* Status – Bedeutung immer zusätzlich über Pfeil, Vorzeichen und Text */
    --success: #1b6b44;
    --success-soft: #eaf3ee;
    --success-border: #cfe4d8;
    --warning: #8a6100;
    --warning-soft: #fdf6e7;
    --warning-border: #f0e0ba;
    --danger: #b3261e;
    --danger-soft: #fbeeec;
    --danger-border: #e0a8a3;
    --neutral: #6b7075;
    --neutral-soft: #f1f2f4;

    /* Diagramme */
    --chart-actual: #191c1f;
    --chart-prior-year: #bfc7cb;
    --chart-plan: #b31b23;
    --chart-neutral: #8a9096;
    --chart-accent: #5c6e78;
    --chart-grid: #eef0f1;

    /* Dunkle Einblendungen (Formel-Tooltip der KPI-Kacheln) */
    --overlay-bg: #191c1f;
    --overlay-code-bg: #24282c;
    --overlay-text: #e7e9eb;
    --overlay-muted: #a9aeb3;

    /* Typografie */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --font-size-micro: 10.5px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-kpi: 30px;
    --font-size-kpi-sm: 22px;

    /* Abstände */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 44px;

    /* Formen */
    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --shadow-card: 0 1px 2px rgba(16, 20, 24, 0.04);
    --shadow-card-hover: 0 2px 10px rgba(16, 20, 24, 0.08);
    --shadow-overlay: 0 8px 24px rgba(16, 20, 24, 0.22);

    /* Layout */
    --sidebar-width: 242px;
    --topbar-height: 64px;
    --content-max-width: 1560px;
}