:root {
--bg-primary: #000000;
--bg-secondary: #1a1a1a;
--fg-primary: #ffffff;
--fg-secondary: #cccccc;
--accent: #ffff00;
--success: #00ff00;
--warning: #ffaa00;
--error: #ff3333;
--focus: #00ffff;
--link: #66ccff;
--border: #ffffff;
}
* {
color: var(--fg-primary);
background: var(--bg-primary);
}
.title { color: var(--accent); }
.button {
background: var(--accent);
color: var(--bg-primary);
border: 2px solid var(--accent);
}
.button:hover {
background: var(--bg-primary);
color: var(--accent);
}
.button:focus {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
.button:disabled {
background: var(--bg-secondary);
color: var(--fg-secondary);
border: 2px dashed var(--fg-secondary);
}
.input {
background: var(--bg-secondary);
border: 2px solid var(--border);
color: var(--fg-primary);
}
.input:focus {
border-color: var(--focus);
outline: 3px solid var(--focus);
outline-offset: 2px;
}
.list-item:selected {
background: var(--accent);
color: var(--bg-primary);
}
.list-item:focus {
outline: 3px solid var(--focus);
outline-offset: -3px;
}
.link { color: var(--link); text-decoration: underline; }
.link:hover { color: var(--accent); }
.link:focus { outline: 3px solid var(--focus); }
.success { color: var(--success); }
.warning { color: var(--warning); }
.error { color: var(--error); }
.disabled { color: var(--fg-secondary); }