/*
 * Theme-Definition für den Speedtest.
 * Alle Farben sind CSS-Variablen. Anpassen = unten Werte editieren.
 *
 * Es gibt zwei Modi:
 *   :root              -> Light (default)
 *   :root[data-theme="dark"] -> Dark
 *
 * Tailwind ist in views/layout.php so konfiguriert, dass die Utility-
 * Klassen `bg-surface`, `text-ink`, `border-line` etc. auf diese
 * Variablen zeigen.
 */

:root {
    /* Light */
    --bg:           #f6f7fb;
    --surface:      #ffffff;
    --surface-2:    #f1f3f9;
    --line:         #e2e6ee;
    --ink:          #0f172a;
    --ink-muted:    #475569;
    --ink-subtle:   #94a3b8;
    --accent:       #059669;     /* emerald-600 */
    --accent-soft:  #d1fae5;
    --accent-ink:   #064e3b;
    --danger:       #be123c;
    --danger-soft:  #ffe4e6;
}

:root[data-theme="dark"] {
    --bg:           #0b1120;
    --surface:      #111827;
    --surface-2:    #1f2937;
    --line:         #1f2937;
    --ink:          #e2e8f0;
    --ink-muted:    #94a3b8;
    --ink-subtle:   #64748b;
    --accent:       #10b981;     /* emerald-500 */
    --accent-soft:  #052e25;
    --accent-ink:   #a7f3d0;
    --danger:       #f43f5e;
    --danger-soft:  #3f1622;
}

/* Body-Grundton */
html, body {
    background-color: var(--bg);
    color: var(--ink);
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Smooth-Transitions beim Theme-Wechsel */
* {
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}