/* ================================================================
 * DATEI: css/variables.css
 * ZWECK: CSS Custom Properties - EINZIGE QUELLE DER WAHRHEIT
 *        Dual-Theme (Dark/Light) via prefers-color-scheme
 *        Aesthetic: "Refined Brass Studio"
 * ================================================================ */

/* ===== SHARED DESIGN TOKENS (both themes) ===== */
:root {
    /* Typography */
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --font-xs: 0.6875rem;
    --font-sm: 0.78125rem;
    --font-base: 0.8575rem;
    --font-lg: 0.9375rem;
    --font-xl: 1.0625rem;
    --font-2xl: 1.25rem;
    --font-3xl: 1.5rem;

    /* Spacing (4px base) */
    --space-0: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Border Radii */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 100px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.12s cubic-bezier(0.2, 0, 0, 1);
    --transition-normal: 0.2s cubic-bezier(0.2, 0, 0, 1);
    --transition-slow: 0.35s cubic-bezier(0.2, 0, 0, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --rail-width: 52px;
    --topbar-height: 48px;
    --statusbar-height: 28px;
    --sidebar-width: 240px;
    --overlay-width: 480px;
    --modal-width: 920px;
    --modal-height: 80vh;
    --modal-form-width: 480px;

    /* Accent Colors (shared across themes) */
    --brass: #c9a87c;
    --brass-light: #dbbf99;
    --brass-dark: #a88b5e;
    --brass-subtle: rgba(201, 168, 124, 0.12);
    --brass-glow: rgba(201, 168, 124, 0.25);

    --teal: #5ba4a8;
    --teal-light: #7abec2;
    --teal-subtle: rgba(91, 164, 168, 0.12);

    --success: #4ebb6a;
    --success-subtle: rgba(78, 187, 106, 0.12);
    --warning: #dba24e;
    --warning-subtle: rgba(219, 162, 78, 0.12);
    --danger: #d95555;
    --danger-subtle: rgba(217, 85, 85, 0.12);
    --danger-hover: #c44040;
    --purple: #8b7ec8;
    --purple-subtle: rgba(139, 126, 200, 0.12);
}

/* ===== DARK THEME (default) ===== */
:root {
    --bg-app: #131316;
    --bg-surface: #1a1a1f;
    --bg-elevated: #222228;
    --bg-card: #1e1e24;
    /* Beide Toene am 19.09.2026 um vier bzw. fuenf Stufen abgedunkelt
       (war #2a2a32 / #32323c). Grund: --text-muted erreichte darauf nur
       4,26:1 und 3,79:1. Die Stufe zwischen Hover und Aktiv bleibt erhalten
       (Kontrast 1,10 zueinander), der Preis ist ein etwas leiserer
       Hover-Effekt gegen --bg-surface (1,19 -> 1,13). */
    --bg-hover: #26262e;
    --bg-active: #2d2d37;
    --bg-input: #18181c;
    --bg-inset: #111114;

    --text-primary: #e8e6e3;
    --text-secondary: #9a9898;
    /* War #5e5e64 (Kontrast 2,46:1 bis 2,88:1 - fehlgeschlagen), dann #8c8c92.
       Der Zwischenstand trug nur auf den ruhenden Gruenden: gemessen 5,55 auf
       --bg-app, 5,18 auf --bg-surface, 4,96 auf --bg-card, 4,73 auf
       --bg-elevated, aber 4,26 auf --bg-hover und 3,79 auf --bg-active
       (Pruefer-Befund B9, die alte Kommentarzeile behauptete 4,58 bis 4,96 als
       Spanne und liess die zwei Zustands-Gruende aus).
       Jetzt #94949a: 4,51:1 bis 6,25:1 auf ALLEN acht Gruenden, zusammen mit
       den abgedunkelten --bg-hover/--bg-active. Bleibt leiser als
       --text-secondary, der Abstand der beiden schrumpft dabei von 1,16 auf
       1,05. Nachgerechnet mit dem Skript aus dem Bericht vom 19.09.2026. */
    --text-muted: #94949a;
    --text-on-accent: #1a1714;
    --text-on-dark: #ffffff;

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65);

    --glass: rgba(26, 26, 31, 0.82);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-thick: rgba(26, 26, 31, 0.95);

    --accent-primary: var(--brass);
    --accent-primary-hover: var(--brass-light);
    --accent-primary-transparent: var(--brass-subtle);
    --accent-secondary: var(--teal);
    --accent-success: var(--success);
    --accent-warning: var(--warning);
    --accent-danger: var(--danger);
    --accent-danger-hover: var(--danger-hover);
    --accent-purple: var(--purple);

    /* Legacy aliases (backward compat) */
    --bg-primary: var(--bg-app);
    --bg-secondary: var(--bg-surface);
    --bg-tertiary: var(--bg-elevated);
    --border-color: var(--border-default);
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* ===== LIGHT THEME ===== */
@media (prefers-color-scheme: light) {
    :root {
        --bg-app: #f4f3f0;
        --bg-surface: #ffffff;
        --bg-elevated: #ffffff;
        --bg-card: #ffffff;
        --bg-hover: #f0efec;
        --bg-active: #e8e7e3;
        --bg-input: #f7f6f3;
        --bg-inset: #eeedea;

        --text-primary: #1c1c1e;
        /* War #6b6b70: 4,28:1 auf --bg-active, 4,53 auf --bg-inset, 4,61 auf
           --bg-hover, 4,78 bis 5,30 auf den ruhenden Gruenden. Seit 26.09.2026
           (Loop 2, Befund B-4) #66666b: 4,61:1 auf --bg-active bis 5,71:1 auf
           --bg-surface, also auf allen acht Gruenden ueber 4,5:1. Das ist die
           hellste Stufe der Grauachse (Blau fuenf ueber Rot und Gruen), die
           nicht heller als --text-muted ausfaellt; #67676c haette 4,55 erreicht,
           waere aber heller als --text-muted. Bewacht durch
           tests/kontrast.test.js, das die Token aus dieser Datei liest. */
        --text-secondary: #66666b;
        /* War #9d9da3 (Kontrast 2,43:1 bis 2,70:1 - fehlgeschlagen), dann
           #6c6c72. Auch hier trug der Zwischenstand nicht ueberall: gemessen
           5,22 auf --bg-surface/--bg-card/--bg-elevated, 4,83 auf --bg-input,
           4,70 auf --bg-app, 4,54 auf --bg-hover, aber 4,46 auf --bg-inset und
           4,22 auf --bg-active (Pruefer-Befund B9; die alte Kommentarzeile
           nannte 4,60 bis 4,73 und traf damit keinen der Werte).
           Jetzt #66666c: 4,61:1 bis 5,70:1 auf allen acht Gruenden, die
           Gruende bleiben hier unangetastet. Der alte Wert #6c6c72 und
           --text-secondary #6b6b70 standen zueinander bei 1,005, also auf
           demselben Ton - eine Hierarchie zwischen beiden gibt es im hellen
           Thema ohnehin nicht, deshalb kostet das Abdunkeln hier nichts.
           --text-secondary ist seit Loop 2 (Befund B-4) ebenfalls ueber 4,5:1
           auf allen acht Gruenden und steht jetzt eine Spur dunkler als
           --text-muted (1,001 zueinander), die Reihenfolge der beiden stimmt
           damit wieder, sichtbar ist der Unterschied nicht. */
        --text-muted: #66666c;
        --text-on-accent: #ffffff;
        --text-on-dark: #ffffff;

        --border-subtle: rgba(0, 0, 0, 0.05);
        --border-default: rgba(0, 0, 0, 0.1);
        --border-strong: rgba(0, 0, 0, 0.18);

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.06);
        --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);

        --glass: rgba(255, 255, 255, 0.82);
        --glass-border: rgba(0, 0, 0, 0.05);
        --glass-thick: rgba(255, 255, 255, 0.95);

        --accent-primary: var(--brass-dark);
        --accent-primary-hover: var(--brass);
        --accent-primary-transparent: rgba(168, 139, 94, 0.1);
        --accent-secondary: #4a9195;
        --accent-success: #3a9e52;
        --accent-warning: #c28d3a;
        --accent-danger: #c44040;
        --accent-danger-hover: #b03030;
        --accent-purple: #6b5eaa;

        --bg-primary: var(--bg-app);
        --bg-secondary: var(--bg-surface);
        --bg-tertiary: var(--bg-elevated);
        --border-color: var(--border-default);
        --shadow-color: rgba(0, 0, 0, 0.1);
    }
}