/* ── Design Tokens ─────────────────────────────────────────── */ :root { /* Overridable by ThemeService.GenerateThemeCss() per-user preset selection */ --brand-primary: var(--primary-color, #2563eb); --brand-secondary: var(--secondary-color, #0891b2); --brand-accent: var(--accent-color, #7c3aed); --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f8f9fc; --border-color: #e5e7eb; --border-subtle: rgba(0,0,0,.06); --text-primary: #111827; --text-secondary: #6b7280; --text-muted: #9ca3af; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(0,0,0,.06); --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05); --shadow-lg: 0 10px 28px rgba(0,0,0,.11), 0 4px 10px rgba(0,0,0,.07); --shadow-brand: 0 4px 14px rgba(37, 99, 235, .38); --transition-fast: .12s ease; --transition-base: .2s ease; } /* Dark mode: applied via data-theme="dark" on , set from the user's persisted UserTheme preference (see App.razor bootstrap script). Surface/text/border pairs below maintain WCAG AA contrast (>= 4.5:1). */ :root[data-theme="dark"] { --brand-primary: var(--primary-color, #60a5fa); --brand-secondary: var(--secondary-color, #22d3ee); --brand-accent: var(--accent-color, #a78bfa); --surface: #1a1a1a; --surface-raised: #242424; --surface-sunken: #121212; --border-color: #3a3a3a; --border-subtle: rgba(255,255,255,.08); --text-primary: #f3f4f6; --text-secondary: #d1d5db; --text-muted: #9ca3af; --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3); --shadow-lg: 0 10px 28px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.35); } /* ── Global Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0; background: var(--surface-sunken); color: var(--text-primary); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Blazor Form Validation ────────────────────────────────── */ h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #22c55e; } .invalid { outline: 1px solid #ef4444; } .validation-message { color: #ef4444; font-size: .82rem; margin-top: .25rem; } /* ── Blazor Error Boundary ─────────────────────────────────── */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ── Form Floating Placeholder ─────────────────────────────── */ .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--text-muted); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── Spinner keyframe (shared) ─────────────────────────────── */ @keyframes ks-spin { to { transform: rotate(360deg); } } .ks-spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--border-color); border-top-color: var(--brand-primary); border-radius: 50%; animation: ks-spin .7s linear infinite; vertical-align: middle; } /* ── Skeleton pulse ────────────────────────────────────────── */ @keyframes ks-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .ks-skeleton { background: var(--border-color); border-radius: var(--radius-sm); animation: ks-pulse 1.6s ease-in-out infinite; }