:root {
    --mago-bg: 248 250 252;
    --mago-panel: 255 255 255;
    --mago-border: 226 232 240;
    --mago-accent: 16 185 129;
    --mago-warning: 245 158 11;
    --mago-danger: 239 68 68;
    --mago-text: 15 23 42;
    --mago-muted: 100 116 139;
    --mago-grid-color: 203 213 225;
}

html.dark {
    --mago-bg: 10 13 18;
    --mago-panel: 18 23 33;
    --mago-border: 30 41 59;
    --mago-accent: 16 185 129;
    --mago-warning: 245 158 11;
    --mago-danger: 239 68 68;
    --mago-text: 248 250 252;
    --mago-muted: 100 116 139;
    --mago-grid-color: 30 41 59;
}

body { background-color: rgb(var(--mago-bg)); color: rgb(var(--mago-text)); transition: background-color 0.3s, color 0.3s; }
.grid-bg {
    background-image: radial-gradient(rgb(var(--mago-grid-color)) 1px, transparent 1px);
    background-size: 24px 24px;
}
.glow-accent {
    box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.25);
}