:root {
color-scheme: dark;
--bg: #000000;
--surface: #111111;
--surface-hover: #1a1a1a;
--glass: rgba(17, 17, 17, 0.92);
--border: #2e2e2e;
--border-subtle: #1a1a1a;
--green: #88A888;
--green-soft: color-mix(in srgb, var(--green) 14%, transparent);
--on-green: #000000;
--olive: #A8B365;
--olive-soft: color-mix(in srgb, var(--olive) 14%, transparent);
--blue: #38bdf8;
--blue-soft: color-mix(in srgb, var(--blue) 12%, transparent);
--alert: #C55454;
--alert-soft: color-mix(in srgb, var(--alert) 16%, transparent);
--text: #FFFFFF;
--text-body: #FFFFFF;
--text-subtle: rgba(255, 255, 255, 0.55);
--silver: #E6E6E6;
--muted: #BDBDBD;
--dim: #8A8A8A;
--edge: #1f1f1f;
--grid-major: #353535;
--grid-dot: rgba(255, 255, 255, 0.07);
--stage-ground: #18181b;
--part-base: #6f7d6b;
--light: #FFFFFF;
--light-fill: #90cdf4;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
--traffic-close: #FF5F57;
--traffic-min: #FEBC2E;
--traffic-max: #28C840;
--traffic-glyph: rgba(0, 0, 0, 0.65);
}
:root[data-theme="light"] {
color-scheme: light;
--bg: #f3f3ee;
--surface: #ffffff;
--surface-hover: #ebebe5;
--glass: rgba(255, 255, 255, 0.94);
--border: #cfcfc6;
--border-subtle: #e2e2db;
--green: #4d7a48;
--green-soft: color-mix(in srgb, var(--green) 12%, transparent);
--on-green: #ffffff;
--alert: #b03a3a;
--alert-soft: color-mix(in srgb, var(--alert) 10%, transparent);
--text: #111111;
--text-body: #111111;
--text-subtle: rgba(17, 17, 17, 0.62);
--grid-dot: rgba(0, 0, 0, 0.08);
--shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
margin: 0;
flex: none;
border: 1px solid var(--border);
border-radius: 0;
background: transparent;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: var(--green);
border-color: var(--green);
box-shadow: inset 0 0 0 3px var(--bg);
}
input[type="checkbox"]:focus-visible {
outline: 1px solid var(--green);
outline-offset: 2px;
}
input[type="checkbox"]:disabled {
opacity: 0.5;
cursor: default;
}