/* LAYER 02 — SEMANTIC (dark) Themes are always PINNED on . "System" is resolved once in JS — matchMedia('(prefers-color-scheme: dark)') sets data-theme="dark" — so every token in the system lives under a registered scope and nothing depends on a bare media query. To add a future theme, duplicate this block under a new selector — e.g. :root[data-theme="orka-midnight"] — and remap only these semantic names. */ :root[data-theme="dark"] { --brand: var(--orka-blue-600); --brand-hover: var(--orka-blue-500); --brand-active: var(--orka-blue-400); --brand-text: var(--orka-blue-400); --brand-subtle: #16304E; --brand-subtle-hover: #1B3D63; --brand-border: #2D5B8A; --brand-on: var(--orka-neutral-0); --brand-disabled: #2B4E72; --bg-canvas: var(--orka-neutral-950); --bg-surface: var(--orka-dark-surface); --bg-surface-sunken: #0A1F38; --bg-subtle: var(--orka-neutral-800); --bg-muted: #1B3555; --bg-inverse: var(--orka-neutral-25); --bg-on-inverse: var(--orka-neutral-850); --text-primary: var(--orka-neutral-50); --text-secondary: var(--orka-neutral-300); --text-tertiary: var(--orka-neutral-400); --text-disabled: var(--orka-neutral-500); --text-link: var(--orka-blue-400); --text-link-hover: var(--orka-blue-300); --border-subtle: #1E3A5C; --border-default: #2A4A70; --border-strong: #3C5F86; --border-brand: #2D5B8A; --success-text: #4BD49E; --success-solid: var(--orka-chart-4-dark); --success-subtle: #0A2E27; --success-border: #1C5C46; --warning-text: #E4B25C; --warning-solid: var(--orka-chart-5-dark); --warning-subtle: #2E2410; --warning-border: #5C4A1C; --error-text: #F08C84; --error-solid: #E0554B; --error-subtle: #331714; --error-border: #6B2C26; --info-text: var(--orka-blue-400); --info-solid: var(--orka-blue-600); --info-subtle: #16304E; --info-border: #2D5B8A; --accent-ai-surface: #171A3A; --accent-ai-border: #2E3070; --accent-ai-text: #A9AEFF; --chart-1: var(--orka-chart-1-dark); --chart-2: var(--orka-chart-2-dark); --chart-3: var(--orka-chart-3-dark); --chart-4: var(--orka-chart-4-dark); --chart-5: var(--orka-chart-5-dark); --chart-6: var(--orka-chart-6-dark); --chart-7: var(--orka-chart-7-dark); --chart-8: var(--orka-chart-8-dark); --chart-other: var(--orka-neutral-500); --chart-surface: var(--orka-dark-surface); --chart-grid: #1E3A5C; --chart-axis-text: var(--orka-neutral-400); --chart-track: var(--orka-neutral-800); --state-hover: rgb(248 251 255 / var(--opacity-8)); --state-pressed: rgb(248 251 255 / var(--opacity-12)); --state-selected: #16304E; --state-focus-ring: rgb(90 168 238 / 0.45); --scrim: rgb(6 24 46 / 0.62); }