/* ───────────────────────────────────────────────────────────── KEA System — Theme token definitions Usage: set data-theme="violet|slate|white" and data-mode="light|dark" on ───────────────────────────────────────────────────────────── */ :root, html { --opero-red: #c1352b; --opero-red-80: rgba(193, 53, 43, 0.8); --opero-red-ink: #cc2200; --opero-red-ink-80: rgba(204, 34, 0, 0.8); --brand-secondary: var(--opero-red-ink); --required-mark: #dc2626; --danger: #dc2626; --danger-hover: #b91c1c; --link: var(--accent); } /* ── Violet · Light ── */ [data-theme="violet"][data-mode="light"] { --sidebar-bg: #f5f3ff; --sidebar-text: #4c1d95; --sidebar-muted: #7c3aed; --sidebar-hover-bg: rgba(124,58,237,.08); --sidebar-active-bg: rgba(124,58,237,.12); --sidebar-active-text: #5b21b6; --sidebar-border: #ede9fe; --sidebar-brand-text: #1e1b4b; --topnav-bg: #ffffff; --topnav-text: #111827; --topnav-border: #e5e7eb; --topnav-muted: #6b7280; --content-bg: #f5f4fc; --surface-bg: #ffffff; --surface-border: #e5e7eb; --surface-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-text: #ffffff; --accent-subtle: #ede9fe; --accent-subtle-text: #5b21b6; --alert-success-bg: #dcfce7; --alert-success-text: #166534; --alert-success-border:#bbf7d0; --alert-error-bg: #fee2e2; --alert-error-text: #991b1b; --alert-error-border: #fecaca; } /* ── Violet · Dark ── */ [data-theme="violet"][data-mode="dark"] { --sidebar-bg: #1e1b38; --sidebar-text: #a5a3cc; --sidebar-muted: #5e5a90; --sidebar-hover-bg: rgba(255,255,255,.07); --sidebar-active-bg: rgba(124,58,237,.30); --sidebar-active-text: #d4d2ff; --sidebar-border: rgba(255,255,255,.06); --sidebar-brand-text: #ffffff; --topnav-bg: #22203c; --topnav-text: #e2e2f0; --topnav-border: rgba(255,255,255,.08); --topnav-muted: #8b8aac; --content-bg: #19172b; --surface-bg: #26233e; --surface-border: rgba(255,255,255,.08); --surface-shadow: 0 1px 4px rgba(0,0,0,.4); --text-primary: #f0effe; --text-secondary: #c4c3e0; --text-muted: #8b8aac; --accent: #8b5cf6; --accent-hover: #7c3aed; --accent-text: #ffffff; --accent-subtle: rgba(124,58,237,.20); --accent-subtle-text: #c4b5fd; --alert-success-bg: rgba(220,252,231,.10); --alert-success-text: #86efac; --alert-success-border:rgba(187,247,208,.15); --alert-error-bg: rgba(254,226,226,.10); --alert-error-text: #fca5a5; --alert-error-border: rgba(254,202,202,.15); } /* ── Slate · Light ── */ [data-theme="slate"][data-mode="light"] { --sidebar-bg: #f1f5f9; --sidebar-text: #1e293b; --sidebar-muted: #64748b; --sidebar-hover-bg: rgba(13,148,136,.08); --sidebar-active-bg: rgba(13,148,136,.12); --sidebar-active-text: #0f766e; --sidebar-border: #e2e8f0; --sidebar-brand-text: #0f172a; --topnav-bg: #ffffff; --topnav-text: #111827; --topnav-border: #e5e7eb; --topnav-muted: #6b7280; --content-bg: #f0f9ff; --surface-bg: #ffffff; --surface-border: #e2e8f0; --surface-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); --text-primary: #0f172a; --text-secondary: #1e293b; --text-muted: #64748b; --accent: #0d9488; --accent-hover: #0f766e; --accent-text: #ffffff; --accent-subtle: #ccfbf1; --accent-subtle-text: #134e4a; --alert-success-bg: #dcfce7; --alert-success-text: #166534; --alert-success-border:#bbf7d0; --alert-error-bg: #fee2e2; --alert-error-text: #991b1b; --alert-error-border: #fecaca; } /* ── Slate · Dark ── */ [data-theme="slate"][data-mode="dark"] { --sidebar-bg: #0f1828; --sidebar-text: #7c8fa3; --sidebar-muted: #3d4f63; --sidebar-hover-bg: rgba(255,255,255,.06); --sidebar-active-bg: rgba(13,148,136,.22); --sidebar-active-text: #5eead4; --sidebar-border: rgba(255,255,255,.06); --sidebar-brand-text: #ffffff; --topnav-bg: #132033; --topnav-text: #e2e8f0; --topnav-border: rgba(255,255,255,.07); --topnav-muted: #718096; --content-bg: #0d182c; --surface-bg: #152438; --surface-border: rgba(255,255,255,.07); --surface-shadow: 0 1px 4px rgba(0,0,0,.5); --text-primary: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #718096; --accent: #14b8a6; --accent-hover: #0d9488; --accent-text: #ffffff; --accent-subtle: rgba(13,148,136,.18); --accent-subtle-text: #5eead4; --alert-success-bg: rgba(220,252,231,.10); --alert-success-text: #86efac; --alert-success-border:rgba(187,247,208,.12); --alert-error-bg: rgba(254,226,226,.10); --alert-error-text: #fca5a5; --alert-error-border: rgba(254,202,202,.12); } /* ── White · Light ── */ [data-theme="white"][data-mode="light"] { --sidebar-bg: #ffffff; --sidebar-text: #374151; --sidebar-muted: #9ca3af; --sidebar-hover-bg: #f9fafb; --sidebar-active-bg: #f3f4f6; --sidebar-active-text: #111827; --sidebar-border: #e5e7eb; --sidebar-brand-text: #111827; --topnav-bg: #ffffff; --topnav-text: #111827; --topnav-border: #e5e7eb; --topnav-muted: #6b7280; --topnav-user-bg: #e4e4e7; --topnav-user-bg-hover:#d4d4d8; --topnav-user-text: #27272a; --content-bg: #f9fafb; --surface-bg: #ffffff; --surface-border: #e5e7eb; --surface-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --accent: #c1352b; --accent-hover: #a82e25; --accent-text: #ffffff; --accent-subtle: rgba(193,53,43,.10); --accent-subtle-text: #9a2b23; --alert-success-bg: #dcfce7; --alert-success-text: #166534; --alert-success-border:#bbf7d0; --alert-error-bg: #fee2e2; --alert-error-text: #991b1b; --alert-error-border: #fecaca; } /* ── White · Dark ── */ [data-theme="white"][data-mode="dark"] { --sidebar-bg: #111111; --sidebar-text: #d4d4d8; --sidebar-muted: #b4b4bc; --sidebar-hover-bg: rgba(255,255,255,.06); --sidebar-active-bg: rgba(255,255,255,.10); --sidebar-active-text: #e4e4e7; --sidebar-border: rgba(255,255,255,.08); --sidebar-brand-text: #fafafa; --topnav-bg: #111111; --topnav-text: #e4e4e7; --topnav-border: rgba(255,255,255,.08); --topnav-muted: #a1a1aa; --topnav-user-bg: rgba(255, 255, 255, 0.14); --topnav-user-bg-hover:rgba(255, 255, 255, 0.2); --topnav-user-text: #f4f4f5; --content-bg: #111111; --surface-bg: #161616; --surface-border: rgba(255,255,255,.08); --surface-shadow: 0 1px 4px rgba(0,0,0,.35); --text-primary: #fafafa; --text-secondary: #e4e4e7; --text-muted: #a1a1aa; --accent: var(--opero-red-80); --accent-hover: rgba(193, 53, 43, 0.92); --accent-text: #ffffff; --accent-subtle: rgba(193, 53, 43, 0.18); --accent-subtle-text: var(--opero-red-80); --brand-secondary: var(--opero-red-ink-80); --required-mark: var(--opero-red-80); --link: var(--opero-red-80); --alert-success-bg: rgba(220,252,231,.08); --alert-success-text: #86efac; --alert-success-border:rgba(187,247,208,.12); --alert-error-bg: rgba(254,226,226,.08); --alert-error-text: #fca5a5; --alert-error-border: rgba(254,202,202,.12); } /* Top nav control hover (shared across kits) */ [data-theme][data-mode="light"] { --content-surface-alt: color-mix(in srgb, var(--text-muted) 8%, var(--surface-bg)); --topnav-hover: rgba(15, 23, 42, 0.06); --input-bg: var(--surface-bg); --input-border: var(--surface-border); --input-border-focus: var(--accent); --input-shadow-focus: color-mix(in srgb, var(--accent) 20%, transparent); } [data-theme][data-mode="dark"] { --content-surface-alt: color-mix(in srgb, var(--text-muted) 12%, var(--surface-bg)); --topnav-hover: rgba(255, 255, 255, 0.08); --input-bg: color-mix(in srgb, var(--surface-bg) 92%, #000 8%); --input-border: var(--surface-border); --input-border-focus: var(--opero-red-80); --input-shadow-focus: rgba(193, 53, 43, 0.22); --brand-secondary: var(--opero-red-ink-80); --required-mark: var(--opero-red-80); --danger: rgba(220, 38, 38, 0.85); --danger-hover: rgba(239, 68, 68, 0.9); --link: var(--opero-red-80); } /* White · Dark — lift muted text contrast on near-black backgrounds */ [data-theme="white"][data-mode="dark"] { --surface-bg: #161616; --text-muted: #a1a1aa; --text-secondary: #d4d4d8; --sidebar-active-text: #f4f4f5; } /* Violet · Dark */ [data-theme="violet"][data-mode="dark"] { --text-muted: #9d9cc0; --brand-secondary: #c4b5fd; --required-mark: #f0abfc; } /* Slate · Dark */ [data-theme="slate"][data-mode="dark"] { --text-muted: #94a3b8; --brand-secondary: #5eead4; --required-mark: #99f6e4; }