/* ===== CSS VARIABLES ===== */
:root {
    --color-bg: #000;
    --color-text: #ccc;
    --color-text-light: #999;
    --color-text-subtle: #808080;
    --color-text-muted: #767676;
    --color-heading: #fff;
    --color-heading-sub: #bbb;
    --color-border: #111;
    --color-border-mid: #222;
    --color-border-hover: #333;
    --color-accent: #00ff41;
    --font-main: 'Segoe UI', Arial, sans-serif;
}

/* ===== FOCUS VISIBLE ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #ccc;
    outline-offset: 4px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}