/* ========================================================================== Dark theme — token overrides. Attribute selector [data-theme="dark"] has higher specificity than :root, so these values win once the theme is toggled, regardless of stylesheet order. ========================================================================== */ html[data-theme="dark"] { --color-bg: #000000; --color-bg-alt: #0b0b0d; --color-surface: rgba(28, 28, 30, 0.68); --color-surface-solid: #1c1c1e; --color-surface-raised: #232326; --color-text: #f5f5f7; --color-text-secondary: #98989d; --color-text-tertiary: #6e6e73; --color-on-accent: #ffffff; --color-accent: #0a84ff; --color-accent-hover: #3a9dff; --color-accent-active: #0a6fd6; --color-accent-soft: rgba(10, 132, 255, 0.16); --color-success: #32d74b; --color-danger: #ff453a; --color-danger-soft: rgba(255, 69, 58, 0.14); --color-border: rgba(255, 255, 255, 0.09); --color-border-strong: rgba(255, 255, 255, 0.16); --color-divider: rgba(255, 255, 255, 0.07); --color-input-bg: rgba(255, 255, 255, 0.06); --color-input-border: rgba(255, 255, 255, 0.12); --color-input-readonly-bg: rgba(255, 255, 255, 0.035); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45); --shadow-md: 0 16px 32px rgba(0, 0, 0, 0.55); --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.65); --shadow-focus: 0 0 0 4px var(--color-accent-soft); --bg-mesh: radial-gradient(circle at 10% -10%, rgba(10, 132, 255, 0.16), transparent 45%), radial-gradient(circle at 105% 0%, rgba(94, 92, 230, 0.14), transparent 48%), radial-gradient(circle at 50% 105%, rgba(10, 132, 255, 0.08), transparent 55%); color-scheme: dark; } html[data-theme="dark"] input::placeholder { color: var(--color-text-tertiary); } /* Native form widgets follow the color scheme automatically via color-scheme above (checkboxes fall back cleanly, date pickers etc.) */ /* --------------------------------------------------------------------- Dropdown (select) fix for dark mode. The