/** * Semantic surfaces + brand colors. Light/dark: . * Dynamic overrides are injected after this file from SettingService (see partials/theme_dynamic_style). */ :root { --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-secondary: #64748b; --ui-bg-page: #f8fafc; --ui-bg-elevated: #ffffff; --ui-bg-sidebar: #ffffff; --ui-border: #e2e8f0; --ui-text: #0f172a; --ui-text-muted: #64748b; --ui-topbar: #ffffff; } html.dark { --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-secondary: #94a3b8; --ui-bg-page: #0f172a; --ui-bg-elevated: #1e293b; --ui-bg-sidebar: #1e293b; --ui-border: #334155; --ui-text: #f1f5f9; --ui-text-muted: #94a3b8; --ui-topbar: #1e293b; } .ui-btn-primary { background-color: var(--color-primary); color: #fff; } .ui-btn-primary:hover { background-color: var(--color-primary-hover); } .ui-brand-mark { background-color: var(--color-primary); } .ui-card-shell { border-radius: 0.75rem; border: 1px solid var(--ui-border); background-color: var(--ui-bg-elevated); color: var(--ui-text); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .ui-surface-page { background-color: var(--ui-bg-page); color: var(--ui-text); } .ui-surface-elevated { background-color: var(--ui-bg-elevated); border-color: var(--ui-border); color: var(--ui-text); } .ui-surface-sidebar { background-color: var(--ui-bg-sidebar); border-color: var(--ui-border); } .ui-topbar { background-color: var(--ui-topbar); border-color: var(--ui-border); } .ui-text-muted { color: var(--ui-text-muted); } .ui-avatar-chip { background-color: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-primary); } .ui-badge-accent { background-color: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent); } html.dark .ui-badge-accent { background-color: color-mix(in srgb, var(--color-primary) 22%, transparent); color: color-mix(in srgb, var(--color-primary) 92%, #ffffff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, transparent); } /* No-JS: focus visibility for details/summary menus */ details summary { cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; }