:root {
--bg: #f4f4f4;
--surface: #fff;
--surface-2: #fafafa;
--surface-3: #eceff3;
--surface-4: #ddd;
--border: #eee;
--border-2: #ccc;
--ink: #4D4D4D;
--ink-strong: #333;
--ink-2: #555;
--muted: #888;
--muted-2: #999;
--danger: #b3261e;
--ok: #1e7d34;
--warn: #8a6d00;
--info: #1a5fb4;
--danger-bg: #fdecea;
--ok-bg: #e9f7ec;
--warn-bg: #fff3cd;
--info-bg: #e7f0fb;
--danger-border: #f5c6c1;
--ok-border: #bfe6c9;
--warn-border: #f0d98a;
--info-border: #bcd6f7;
--dark: #4D4D4D;
--red-text: #E2231A;
--shadow: rgba(0,0,0,.06);
--logo-insa: normal;
--card: var(--surface); --line: var(--border-2); --warn-2: var(--warn);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #121418;
--surface: #1c1f25;
--surface-2: #22262d;
--surface-3: #2a2f37;
--surface-4: #3a414c;
--border: #2c313a;
--border-2: #3d4450;
--ink: #d5d9df;
--ink-strong: #eceff3;
--ink-2: #b4bac4;
--muted: #98a0ac;
--muted-2: #8a919c;
--danger: #ff7b72;
--ok: #4cc968;
--warn: #e3b341;
--info: #6cb0ff;
--danger-bg: #3a1d1f;
--ok-bg: #16301f;
--warn-bg: #38300f;
--info-bg: #162a42;
--danger-border: #6b2d2f;
--ok-border: #245a35;
--warn-border: #5c4c14;
--info-border: #26456d;
--dark: #5a606b;
--red-text: #ff6b61;
--shadow: rgba(0,0,0,.35);
--logo-insa: url(/LOGO-INSA-dark.png);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #121418;
--surface: #1c1f25;
--surface-2: #22262d;
--surface-3: #2a2f37;
--surface-4: #3a414c;
--border: #2c313a;
--border-2: #3d4450;
--ink: #d5d9df;
--ink-strong: #eceff3;
--ink-2: #b4bac4;
--muted: #98a0ac;
--muted-2: #8a919c;
--danger: #ff7b72;
--ok: #4cc968;
--warn: #e3b341;
--info: #6cb0ff;
--danger-bg: #3a1d1f;
--ok-bg: #16301f;
--warn-bg: #38300f;
--info-bg: #162a42;
--danger-border: #6b2d2f;
--ok-border: #245a35;
--warn-border: #5c4c14;
--info-border: #26456d;
--dark: #5a606b;
--red-text: #ff6b61;
--shadow: rgba(0,0,0,.35);
--logo-insa: url(/LOGO-INSA-dark.png);
color-scheme: dark;
}
input, select, textarea { background-color: var(--surface); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
img[src$="LOGO-INSA.png"] { content: var(--logo-insa); }
.theme-seg { display: inline-flex; vertical-align: middle; border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; background: var(--surface); }
.theme-seg button { background: none; border: 0; border-right: 1px solid var(--border-2); color: var(--ink); cursor: pointer; font: inherit; font-size: 12px; line-height: 1; padding: 6px 9px; margin: 0; width: auto; white-space: nowrap; }
.theme-seg button:last-child { border-right: 0; }
.theme-seg button:hover { background: var(--surface-3); }
.theme-seg button[aria-pressed="true"] { background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--red); font-weight: 700; }