/* * M1 (C-DASH-02 / IR-009) — Themis semantic design-token foundation. * * ONE semantic CSS-custom-property layer for the frozen shared design foundation * (DESIGN_SYSTEM.md §2.5), loaded AFTER the vendored Bootstrap + Paper Dashboard CSS so it can * theme shared structure without editing vendor files. Light is the reference; dark values were * tuned independently for WCAG 2.2 AA. Never hard-code hex on shared surfaces/text/borders — * read var(--token). Feature-screen migration is a later wave; M1 applies the layer only to the * shared shell needed to validate light / dark / system switching. * * Mode resolution (matches the no-flash init + themis-theme.js): * [data-theme="light"] -> light values * [data-theme="dark"] -> dark values * [data-theme="system"] -> follows the OS via prefers-color-scheme (CSS tracks OS changes live) */ :root, [data-theme="light"] { --page-bg: #EAF6FB; --surface: #FFFFFF; --surface-sub: #F7FAFB; --surface-inset: #F6F9FB; --hover: #F4F9FC; --divider: #EEF3F6; --chip-bg: #EAF0F4; /* JD-003 / DCR-11 — row selection. Light values derive from the frozen table-selection rule (primary/50 fill + primary/600 indicator); the abstract primary ramp has no dark half, so the dark pair below comes from the dark Info family, preserving the same pale-tint + saturated-ink structure. Selection is PERSISTENT container state and is distinct from transient --hover. */ --selected-bg: #EAF1FB; --selected-indicator: #1F5AC0; --border: #DCE6EB; --border-soft: #E2ECF0; --border-strong: #CBD9E0; --text-primary: #10293A; --text-body: #13232C; --text-secondary: #3C5560; --text-muted: #5C6B73; --text-faint: #9AA7AD; --sidebar-bg: #10293A; --btn-dark-bg: #10293A; /* M2.3 (frozen SCREEN_SPECIFICATIONS A1 / prototype Login.dc.html) — auth-surface tokens. */ --btn-dark-hover: #183A52; --btn-dark-active: #0B1D29; --input-field: #FFFFFF; --login-bg: linear-gradient(157deg,#EEF5FA 0%,#E3EEF4 52%,#DCEAF1 100%); --login-glow: radial-gradient(circle,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.5) 42%,rgba(255,255,255,0) 70%); --arch-line: #2C6F92; --arch-line-2: #26596F; --text-on-accent: #FFFFFF; --brand: #2BA8DB; --brand-ink: #14536E; --link: #156088; --link-hover: #0F4867; --overlay: rgba(16, 41, 58, .45); --map-bg: #CFE7F3; --map-grid: #C9D8E0; --map-frame: #D8E3E8; --red-fg: #B3261E; --red-bg: #FBE7E5; --red-bg-strong: #F9D2CD; --red-border: #F0C4BE; --yellow-fg: #8A5A00; --yellow-bg: #FBEFD5; --yellow-border: #F0DCA8; --green-fg: #1B7A43; --green-bg: #E4F4EA; --green-border: #BFE3CB; --info-bg: #CFE7F3; --info-border: #A9CFE3; /* Focus ring — DEDICATED accessible token (PFC-001). The frozen §2.5 focus row previously specified --brand (#2BA8DB), claiming ≥3:1; #2BA8DB on white is only 2.72:1 and FAILS WCAG 2.2 non-text 3:1. This deep cyan is ≥6.8:1 on every light surface while keeping the brand hue. --brand is unchanged so accent/link/selection/logo semantics are untouched. See docs/DECISIONS.md #49. */ --focus-ring: #14536E; /* Map markers (17 September 2026) — MARKER-ONLY colours, deliberately not the chip/text tokens: a pin is a filled shape on a basemap, not text on a surface. Amber is reserved for „Nicht zugewiesen"; „Kein Eintrag" is a hollow pin; the halo and shadow separate a pin from the map; the selected ring has its own colour. Read by public/themis/themis-dashboard.js. */ --map-marker-inapp: #0B84C6; --map-marker-completed: #15803D; --map-marker-dashboard: #4F46E5; --map-marker-legacy: #8795A6; --map-marker-unassigned: #EA580C; --map-marker-unknown: #10293A; --map-marker-missing: #5B6B78; --map-marker-missing-fill: #FFFFFF; --map-marker-halo: #FFFFFF; --map-marker-shadow: #0B1620; --map-marker-selected: #0B3B53; } /* Dark values — explicit [data-theme="dark"] pin, and prefers-color-scheme for [data-theme="system"]. */ [data-theme="dark"] { --page-bg: #0A131B; --surface: #1E2F3C; --surface-sub: #16242F; --surface-inset: #2C3E4B; --hover: #2A3B45; --divider: #243441; --chip-bg: #233440; --selected-bg: #183446; --selected-indicator: #8FD3EF; --border: #2C3D4B; --border-soft: #26333F; --border-strong: #3A4C5A; --text-primary: #EAF2F8; --text-body: #D9E4EB; --text-secondary: #B4C2CD; --text-muted: #93A4AF; --text-faint: #7E909C; --sidebar-bg: #0C1822; --btn-dark-bg: #24333F; /* M2.3 auth-surface tokens (dark). */ --btn-dark-hover: #2E4150; --btn-dark-active: #1A2833; --input-field: #0F1B25; --login-bg: linear-gradient(157deg,#0B1621 0%,#0E1A27 52%,#10202D 100%); --login-glow: radial-gradient(circle,rgba(90,150,195,0.12) 0%,rgba(70,120,165,0.06) 42%,rgba(0,0,0,0) 70%); --arch-line: #4E7FA0; --arch-line-2: #3E6A86; --text-on-accent: #F3F9FC; --brand: #33B0E2; --brand-ink: #8FD3EF; --link: #6FC0E6; --link-hover: #9AD4F0; --overlay: rgba(2, 8, 14, .66); --map-bg: #26384A; --map-grid: #3C5468; --map-frame: #33475A; --red-fg: #E4A099; --red-bg: #342522; --red-bg-strong: #452B27; --red-border: #553832; --yellow-fg: #E8C06A; --yellow-bg: #3A2E12; --yellow-border: #5C4A22; --green-fg: #6FCB8E; --green-bg: #16321F; --green-border: #2E5A3D; --info-bg: #183446; --info-border: #2A5468; /* Focus ring (dark) — bright cyan, ≥6.7:1 on every dark surface (surface/page/inset). See DECISIONS #49. */ --focus-ring: #8FD3EF; /* Map markers — dark values; see the light block. */ --map-marker-inapp: #38BDF8; --map-marker-completed: #4ADE80; --map-marker-dashboard: #818CF8; --map-marker-legacy: #94A3B8; --map-marker-unassigned: #FB923C; --map-marker-unknown: #E2E8F0; --map-marker-missing: #CBD5E1; --map-marker-missing-fill: #16222C; --map-marker-halo: #F1F5F9; --map-marker-shadow: #000000; --map-marker-selected: #020617; } @media (prefers-color-scheme: dark) { [data-theme="system"] { --page-bg: #0A131B; --surface: #1E2F3C; --surface-sub: #16242F; --surface-inset: #2C3E4B; --hover: #2A3B45; --divider: #243441; --chip-bg: #233440; --selected-bg: #183446; --selected-indicator: #8FD3EF; --border: #2C3D4B; --border-soft: #26333F; --border-strong: #3A4C5A; --text-primary: #EAF2F8; --text-body: #D9E4EB; --text-secondary: #B4C2CD; --text-muted: #93A4AF; --text-faint: #7E909C; --sidebar-bg: #0C1822; --btn-dark-bg: #24333F; /* M2.3 auth-surface tokens (dark, system-following). */ --btn-dark-hover: #2E4150; --btn-dark-active: #1A2833; --input-field: #0F1B25; --login-bg: linear-gradient(157deg,#0B1621 0%,#0E1A27 52%,#10202D 100%); --login-glow: radial-gradient(circle,rgba(90,150,195,0.12) 0%,rgba(70,120,165,0.06) 42%,rgba(0,0,0,0) 70%); --arch-line: #4E7FA0; --arch-line-2: #3E6A86; --text-on-accent: #F3F9FC; --brand: #33B0E2; --brand-ink: #8FD3EF; --link: #6FC0E6; --link-hover: #9AD4F0; --overlay: rgba(2, 8, 14, .66); --map-bg: #26384A; --map-grid: #3C5468; --map-frame: #33475A; --red-fg: #E4A099; --red-bg: #342522; --red-bg-strong: #452B27; --red-border: #553832; --yellow-fg: #E8C06A; --yellow-bg: #3A2E12; --yellow-border: #5C4A22; --green-fg: #6FCB8E; --green-bg: #16321F; --green-border: #2E5A3D; --info-bg: #183446; --info-border: #2A5468; --focus-ring: #8FD3EF; /* Map markers — dark values; see the light block. */ --map-marker-inapp: #38BDF8; --map-marker-completed: #4ADE80; --map-marker-dashboard: #818CF8; --map-marker-legacy: #94A3B8; --map-marker-unassigned: #FB923C; --map-marker-unknown: #E2E8F0; --map-marker-missing: #CBD5E1; --map-marker-missing-fill: #16222C; --map-marker-halo: #F1F5F9; --map-marker-shadow: #000000; --map-marker-selected: #020617; } } /* ── Minimal application to SHARED SHELL structure only (validates the switch; not a screen redesign). ── Scoped under [data-theme] so it is inert until the shell opts in via the root attribute. */ [data-theme] body, [data-theme].themis-theme-ready body { background-color: var(--page-bg); color: var(--text-body); } [data-theme] .main-panel { background-color: var(--page-bg); } [data-theme] .sidebar, [data-theme] .sidebar .sidebar-wrapper { background-color: var(--sidebar-bg); /* PFC-001: the sidebar is a DARK shell in BOTH themes (--sidebar-bg #10293A light / #0C1822 dark), so a focus ring inside it must use the light-on-dark token. The light-surface #14536E is only 1.78:1 on #10293A (fails); #8FD3EF is ≥9:1 on both sidebar backgrounds. The appearance control lives here. */ --focus-ring: #8FD3EF; } /* NOTE: feature-screen surfaces (.card, tables, forms, etc.) are intentionally NOT themed here — that is per-screen migration work in later waves (Principle 12 / "do not redesign feature screens"). M1 themes only the shared shell (page background, main panel, sidebar) to validate light/dark/system switching. */ /* Appearance control (account menu) — self-contained, token-driven. */ .themis-appearance { display: flex; align-items: center; gap: 6px; padding: 6px 10px; } .themis-appearance label { font-size: 12px; color: var(--text-muted); margin: 0; } .themis-appearance select { font-size: 13px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border-strong, #CBD9E0); background: var(--surface, #fff); color: var(--text-body, #13232C); } .themis-appearance select:focus-visible { outline: 2px solid var(--focus-ring); /* PFC-001: retrofit from --brand (2.72:1) to the AA focus token */ outline-offset: 2px; }