/* ==========================================================================
   Reverse – Design-Tokens
   Abgeleitet aus design.png (dunkles Dashboard: schwarzer Arbeitsbereich,
   anthrazitfarbene Panels, gedämpfte Blaugrau-Schrift). Die roten Akzente der
   Vorlage (#eb1616) sind durch ein dezentes Blau ersetzt.
   ========================================================================== */

:root {
    /* Akzent (ersetzt Rot der Vorlage) */
    --color-accent: #5b8fd9;            /* Links, aktive Navigation, Icons, Fokus */
    --color-accent-hover: #77a3e3;
    --color-accent-active: #477cc4;
    --color-accent-strong: #3b6fbf;     /* Button-Fläche, weißer Text ≥ 4.5:1 */
    --color-accent-strong-hover: #4a7dcb;
    --color-accent-soft: rgba(91, 143, 217, 0.14);
    --color-accent-softer: rgba(91, 143, 217, 0.07);
    --color-on-accent: #ffffff;

    /* Grundflächen aus der Vorlage */
    --color-background: #000000;        /* Arbeitsbereich zwischen den Panels */
    --color-surface: #181a20;           /* Topbar, Sidebar, Karten */
    --color-surface-elevated: #20232b;  /* Hover, Popover, Dialoge */
    --color-inset: #000000;             /* Eingabefelder, Icon-Kreise, Tabellenlinien */
    --color-inset-hover: #0b0c0f;
    --color-border: #000000;            /* strukturelle Linien wie in der Vorlage */
    --color-border-subtle: #2a2e38;     /* feine Trennlinien innerhalb von Panels */
    --color-border-strong: #3a3f4c;

    /* Text */
    --color-text: #ffffff;              /* Überschriften, Werte */
    --color-text-body: #c7cbdb;         /* Fließtext */
    --color-text-muted: #8389a8;        /* Labels (Vorlage #6c7293, für Kontrast leicht aufgehellt) */
    --color-text-faint: #5d627a;

    /* Status */
    --color-success: #48a878;
    --color-success-soft: rgba(72, 168, 120, 0.14);
    --color-warning: #d7a34b;
    --color-warning-soft: rgba(215, 163, 75, 0.14);
    --color-error: #d86666;
    --color-error-soft: rgba(216, 102, 102, 0.14);
    --color-info: var(--color-accent);

    /* Syntax-Highlighting */
    --syntax-tag: #7aa7e6;
    --syntax-attr: #b8a3e8;
    --syntax-string: #8fc79a;
    --syntax-number: #e0b072;
    --syntax-keyword: #c792ea;
    --syntax-comment: #5d627a;
    --syntax-property: #82c4e0;
    --syntax-selector: #e6c27a;
    --syntax-punct: #8389a8;
    --syntax-function: #7fb8f0;

    /* Typografie */
    --font-sans: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
    --text-xs: 11px;
    --text-sm: 12.5px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 20px;

    /* Abstände (Vorlage: 24px zwischen Karten) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* Formen */
    --radius-sm: 3px;
    --radius: 5px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);

    /* Layout */
    --topbar-height: 64px;
    --sidebar-width: 280px;
    --inspector-width: 340px;
    --footer-height: 30px;

    --transition-fast: 120ms ease;
    --transition: 200ms ease;

    color-scheme: dark;
}

/* Helles Theme (optional über den Theme-Umschalter) */
:root[data-theme="light"] {
    --color-accent: #2f66b3;
    --color-accent-hover: #2457a0;
    --color-accent-active: #1d4a8a;
    --color-accent-strong: #2f66b3;
    --color-accent-strong-hover: #2457a0;
    --color-accent-soft: rgba(47, 102, 179, 0.12);
    --color-accent-softer: rgba(47, 102, 179, 0.06);

    --color-background: #e9ebf0;
    --color-surface: #ffffff;
    --color-surface-elevated: #f6f7f9;
    --color-inset: #eef0f4;
    --color-inset-hover: #e4e7ed;
    --color-border: #d6d9e1;
    --color-border-subtle: #e3e6ec;
    --color-border-strong: #c3c8d3;

    --color-text: #161922;
    --color-text-body: #2b2f3b;
    --color-text-muted: #596079;
    --color-text-faint: #8a90a6;

    --color-success: #2e8a5c;
    --color-warning: #a8741d;
    --color-error: #c04747;

    --syntax-tag: #2457a0;
    --syntax-attr: #7a4fb8;
    --syntax-string: #2e7d43;
    --syntax-number: #a8601d;
    --syntax-keyword: #9b3fb5;
    --syntax-comment: #8a90a6;
    --syntax-property: #1f6f93;
    --syntax-selector: #8a5a00;
    --syntax-punct: #596079;
    --syntax-function: #2457a0;

    --shadow-pop: 0 10px 30px rgba(20, 25, 40, 0.18), 0 2px 6px rgba(20, 25, 40, 0.12);
    color-scheme: light;
}