/* Theme variables — loaded before all other stylesheets */ /* Anti-flash: while i18n translations are loading, hide only translatable text so the page never paints in the wrong language. visibility (not display) preserves layout → no shift. The marker is added by an inline script and removed once translateDOM has run (or by a failsafe timeout). See i18n.js `ready()`. */ html.i18n-pending [data-i18n], html.i18n-pending [data-i18n-html] { visibility: hidden; } :root, [data-theme="light"], [data-theme="plain"] { /* Typography — Urbanist (display) + DM Sans (body), from landing page brand */ --font-display: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Border radius scale */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 50%; /* Transition timing */ --duration-fast: 0.1s; /* row hover, button press */ --duration-base: 0.15s; /* color, background, opacity */ --duration-moderate: 0.2s; /* box-shadow, multi-property */ --duration-slow: 0.25s; /* sidebar, container width */ --ease-standard: ease-out; --ease-layout: ease; /* Surfaces */ --color-bg-body: #f0f5f8; --color-bg-surface: #ffffff; --color-bg-surface-hover: #f5f9fc; --color-bg-surface-active: #edf2f7; --color-bg-muted: #fafbfc; /* Text */ --color-text-primary: #1a202c; --color-text-heading: #2d3748; --color-text-secondary: #4a5568; --color-text-muted: #718096; --color-text-placeholder: #a0aec0; --color-text-subtle: #64748b; /* Shorthand aliases (used by booking/portal pages) */ --color-text: var(--color-text-primary); --color-surface: var(--color-bg-surface); /* Borders — light blue tint */ --color-border: #c4d8e8; --color-border-light: #d6e4f0; --color-border-strong: #a8c4da; /* Primary (brand cyan-blue) — derived from landing #00d4ff, muted for clinical use */ --color-primary: #2b8cb5; --color-primary-hover: #237499; --color-primary-contrast: #ffffff; --color-primary-light: #e8f6fb; --color-primary-focus-ring: rgba(43, 140, 181, 0.2); --color-primary-focus-ring-sm: rgba(43, 140, 181, 0.15); --color-primary-subtle: rgba(43, 140, 181, 0.08); --color-primary-subtle-border: rgba(43, 140, 181, 0.1); /* Secondary accent (purple) — from landing #a855f7, for gradients/highlights only */ --color-accent-purple: #6d45c8; --color-gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple)); /* Secondary button */ --color-btn-secondary-bg: #e2e8f0; --color-btn-secondary-text: #4a5568; --color-btn-secondary-hover: #cbd5e0; /* Danger */ --color-danger: #e53e3e; --color-danger-hover: #c53030; --color-danger-bg: #fff5f5; --color-danger-text: #9b2c2c; --color-danger-border: #c53030; /* Success */ --color-success: #38a169; --color-success-hover: #2f855a; --color-success-bg: #c6f6d5; --color-success-bg-light: #f0fff4; --color-success-text: #276749; /* Warning */ --color-warning: #d69e2e; /* Info — aligned with primary hue */ --color-info: #2b8cb5; --color-info-bg: #e8f6fb; --color-info-text: #1a5d7a; --color-primary-dark: #1a5f80; /* AI pipeline node colours — distinct per type (AI Studio overview + sandbox) */ --color-ai-input: #a8c4da; --color-ai-input-bg: #f5f9fc; --color-ai-live: #d69e2e; --color-ai-live-bg: #fef5e1; --color-ai-batch: #3b82f6; --color-ai-batch-bg: #dbeafe; --color-ai-orchestrator: #38a169; --color-ai-orchestrator-bg: #d7f5e3; --color-ai-output: #6d45c8; --color-ai-output-bg: #ede4fc; /* Table */ --color-table-header-bg: #edf2f7; --color-table-header-text: #718096; --color-table-row-hover: #f5f9fc; --color-table-row-active: #e8f6fb; --color-table-header-bg-translucent: rgba(237, 242, 247, 0.6); /* Sidebar — darker cyan-navy */ --color-sidebar-bg: #1e3a52; --color-sidebar-gradient-start: #1b6ea3; --color-sidebar-gradient-end: #2bafd4; --color-sidebar-text: #ffffff; --color-sidebar-accent: #7dd3e8; --color-sidebar-hover: rgba(255, 255, 255, 0.12); --color-sidebar-active: rgba(255, 255, 255, 0.18); --color-sidebar-muted: rgba(255, 255, 255, 0.6); --color-sidebar-text-muted: rgba(255, 255, 255, 0.85); --color-sidebar-role: rgba(255, 255, 255, 0.5); --color-sidebar-divider: rgba(255, 255, 255, 0.15); --color-sidebar-view-as-bg: rgba(255, 255, 255, 0.1); --color-sidebar-view-as-hover: rgba(255, 255, 255, 0.18); --color-sidebar-view-as-active-bg: rgba(237, 137, 54, 0.25); --color-sidebar-view-as-active-text: #fbd38d; /* Shadows */ --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.03); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.18); --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.07); --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.3); --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04); /* Overlays */ --color-overlay: rgba(0, 0, 0, 0.4); --color-overlay-heavy: rgba(0, 0, 0, 0.5); --color-overlay-lightbox: rgba(0, 0, 0, 0.85); /* Badges — scheduled/active aligned with primary cyan-blue */ --color-badge-scheduled-bg: #daf2fa; --color-badge-scheduled-text: #1a5d7a; --color-badge-completed-bg: #c6f6d5; --color-badge-completed-text: #276749; --color-badge-cancelled-bg: #e2e8f0; --color-badge-cancelled-text: #718096; --color-badge-confirmed-bg: #c6f6d5; --color-badge-confirmed-text: #276749; --color-badge-pending-bg: #fefcbf; --color-badge-pending-text: #975a16; --color-badge-declined-bg: #fed7d7; --color-badge-declined-text: #9b2c2c; --color-badge-paid-bg: #c6f6d5; --color-badge-paid-text: #276749; --color-badge-partial-bg: #fefcbf; --color-badge-partial-text: #975a16; --color-badge-unpaid-bg: #fed7d7; --color-badge-unpaid-text: #9b2c2c; --color-badge-active-bg: #daf2fa; --color-badge-active-text: #1a5d7a; --color-badge-skipped-bg: #f3f4f6; --color-badge-skipped-text: #6b7280; --color-badge-dental-bg: #dbeafe; --color-badge-dental-text: #1d4ed8; --color-badge-hygiene-bg: #ccfbf1; --color-badge-hygiene-text: #0f766e; /* Semantic colors for schedule/calendar badges */ --color-danger-light: #fee2e2; --color-neutral-bg: #f3f4f6; --color-warning-bg: #fef3c7; --color-warning-border: #fde68a; --color-warning-text: #b45309; --color-muted-bg: #f3f4f6; --color-holiday: #c05621; --color-drag-border: rgba(0, 0, 0, 0.8); --color-drag-handle: rgba(0, 0, 0, 0.15); /* Hover tint */ --color-hover-tint: #eef8fb; /* Error message */ --color-error-msg-bg: #fed7d7; --color-error-msg-text: #9b2c2c; --color-error-text: #dc2626; /* Calendar specific */ --color-cal-now-line: #c53030aa; --color-cal-hour-line: #a0aec0; --color-cal-half-line: #cbd5e0; --color-cal-drop-target: #ebf8ff; /* Z-index scale */ --z-base: 1; --z-sticky: 2; --z-sticky-header: 10; --z-resizing: 20; --z-dropdown: 30; --z-sidebar: 50; --z-sidebar-placeholder: 49; --z-modal: 100; --z-view-as: 200; --z-overlay: 900; --z-upload-modal: 9000; --z-upload-dropdown: 9010; --z-chat-panel: 9060; /* Scan overlay (barcode scanner + scan-attach modals) — must sit above the appointment modal (.aptf-overlay 9500 + its flatpickr 9600) when the scan flow is launched from inside that modal, but below the image lightbox. */ --z-scan-overlay: 9700; --z-lightbox: 10000; --z-lightbox-controls: 10001; /* Clinical grid — dimensional tokens (MIC-588, theme-invariant) */ --grid-row-h-compact: 32px; --grid-row-h: 40px; --grid-row-h-roomy: 52px; --grid-header-h: 36px; --grid-footer-h: 36px; --grid-label-w-sm: 160px; --grid-label-w-md: 220px; --grid-cell-px: 1rem; --grid-cell-py: 0.5rem; --grid-fs-header: 0.75rem; --grid-fs-label: 0.8rem; --grid-fs-cell: 0.9rem; --grid-fs-detail: 0.75rem; /* Tooth chart — clinical status fills/strokes (dental + perio + endo). Consumed via ToothChartCore.STATUS; dark equivalents in the dark block. */ --tooth-healthy-fill: #f7fafc; --tooth-healthy-stroke: #cbd5e0; --tooth-caries-fill: #fed7d7; --tooth-caries-stroke: #e53e3e; --tooth-restoration-fill: #bee3f8; --tooth-restoration-stroke: #3182ce; --tooth-crown-fill: #fefcbf; --tooth-crown-stroke: #ecc94b; --tooth-missing-fill: #e2e8f0; --tooth-missing-stroke: #a0aec0; --tooth-cleaning-fill: #c6f6d5; --tooth-cleaning-stroke: #68d391; --tooth-filling-fill: #bee3f8; --tooth-filling-stroke: #63b3ed; --tooth-rct-fill: #fed7d7; --tooth-rct-stroke: #fc8181; --tooth-extraction-fill: #a0aec0; --tooth-extraction-stroke: #718096; --tooth-implant-fill: #e2e8f0; --tooth-implant-stroke: #a0aec0; --tooth-bridge-fill: #e9d8fd; --tooth-bridge-stroke: #9f7aea; --tooth-mixed-fill: #feebc8; --tooth-mixed-stroke: #ed8936; --tooth-primary-fill: #fffbeb; --tooth-primary-stroke: #d4a017; /* Structural chart colors */ --tooth-label: #2d3748; /* FDI number drawn on a tooth */ --tooth-label-on-extraction: #ffffff; --tooth-num: #4a5568; /* FDI number label beside a tooth */ --tooth-divider: #e2e8f0; /* midline / arch divider lines */ --tooth-surface-bg: #f7fafc; --tooth-surface-border: #cbd5e0; --tooth-absent-mark: #718096; --tooth-empty-text: #cbd5e0; /* unerupted / placeholder glyph */ --tooth-caries-marker: #e53e3e; /* caries cross lines */ --tooth-restoration-dot: #2b6cb0; /* Scrollbars — track + thumb (consumed by the token-driven rule below) */ --scrollbar-track: #f0f5f8; --scrollbar-thumb: #cbd5e0; --scrollbar-thumb-hover: #a0aec0; /* Categorical chart/series palette — doctor colours, multi-series charts. 8 distinct hues; consume via var(--chart-cat-N), never raw hex. */ --chart-cat-1: #0ea5e9; --chart-cat-2: #ed8936; --chart-cat-3: #9f7aea; --chart-cat-4: #38b2ac; --chart-cat-5: #f56565; --chart-cat-6: #d69e2e; --chart-cat-7: #ed64a6; --chart-cat-8: #667eea; } [data-theme="dark"], [data-theme="night-sky"], [data-theme="contrast"], [data-theme="city"], [data-theme="forest"] { color-scheme: dark; /* Tooth chart — dark mode: bright, saturated tooth fills so present teeth pop against the dark canvas (with dark on-tooth labels). Absent/empty teeth use the dark surface tokens below so they recede. */ --tooth-healthy-fill: #e2e8f0; --tooth-healthy-stroke: #a0aec0; --tooth-caries-fill: #fc8181; --tooth-caries-stroke: #c53030; --tooth-restoration-fill: #63b3ed; --tooth-restoration-stroke: #2b6cb0; --tooth-crown-fill: #f6e05e; --tooth-crown-stroke: #b7791f; --tooth-missing-fill: #718096; --tooth-missing-stroke: #4a5568; --tooth-cleaning-fill: #68d391; --tooth-cleaning-stroke: #2f855a; --tooth-filling-fill: #63b3ed; --tooth-filling-stroke: #3182ce; --tooth-rct-fill: #fc8181; --tooth-rct-stroke: #e53e3e; --tooth-extraction-fill: #718096; --tooth-extraction-stroke: #4a5568; --tooth-implant-fill: #cbd5e0; --tooth-implant-stroke: #718096; --tooth-bridge-fill: #b794f4; --tooth-bridge-stroke: #6b46c1; --tooth-mixed-fill: #f6ad55; --tooth-mixed-stroke: #c05621; --tooth-primary-fill: #faf089; --tooth-primary-stroke: #b7791f; --tooth-label: #1a202c; /* dark number on bright tooth fills */ --tooth-label-on-extraction: #ffffff; --tooth-num: #a0aec0; /* FDI label beside tooth, on dark page */ --tooth-divider: #2d3748; --tooth-surface-bg: #1a2030; --tooth-surface-border: #2d3748; --tooth-absent-mark: #a0aec0; --tooth-empty-text: #4a5568; --tooth-caries-marker: #c53030; --tooth-restoration-dot: #2b6cb0; /* Surfaces — layered: body < sidebar < surface < hover < active */ --color-bg-body: #0d1525; --color-bg-surface: #152042; --color-bg-surface-hover: #1c2952; --color-bg-surface-active: #243362; --color-bg-muted: #152042; /* Text */ --color-text-primary: #e2e8f0; --color-text-heading: #f1f5f9; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; --color-text-placeholder: #64748b; --color-text-subtle: #94a3b8; /* Shorthand aliases */ --color-text: var(--color-text-primary); --color-surface: var(--color-bg-surface); /* Borders — glass style with cyan tint (matches landing page) */ --color-border: rgba(0, 212, 255, 0.2); --color-border-light: rgba(0, 212, 255, 0.12); --color-border-strong: rgba(0, 212, 255, 0.3); /* Primary — cyan-blue, brighter for dark backgrounds */ --color-primary: #5bb8d9; --color-primary-hover: #7ecce5; --color-primary-contrast: #0d1a24; --color-primary-light: rgba(91, 184, 217, 0.15); --color-primary-focus-ring: rgba(91, 184, 217, 0.3); --color-primary-focus-ring-sm: rgba(91, 184, 217, 0.2); --color-primary-subtle: rgba(91, 184, 217, 0.1); --color-primary-subtle-border: rgba(91, 184, 217, 0.15); /* Secondary accent (purple) */ --color-accent-purple: #8b5cf6; --color-gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple)); /* Secondary button */ --color-btn-secondary-bg: #2e3546; --color-btn-secondary-text: #e2e8f0; --color-btn-secondary-hover: #3e4a64; /* Danger */ --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-bg: rgba(248, 113, 113, 0.1); --color-danger-text: #fca5a5; --color-danger-border: #f87171; /* Success */ --color-success: #34d399; --color-success-hover: #6ee7b7; --color-success-bg: rgba(52, 211, 153, 0.15); --color-success-bg-light: rgba(52, 211, 153, 0.1); --color-success-text: #6ee7b7; /* Warning */ --color-warning: #fbbf24; /* Info — aligned with primary */ --color-info: #5bb8d9; --color-info-bg: rgba(91, 184, 217, 0.15); --color-info-text: #7ecce5; --color-primary-dark: #3a8fa8; /* AI pipeline node colours — distinct per type (AI Studio overview + sandbox) */ --color-ai-input: #64748b; --color-ai-input-bg: rgba(100, 116, 139, 0.15); --color-ai-live: #fbbf24; --color-ai-live-bg: rgba(251, 191, 36, 0.15); --color-ai-batch: #60a5fa; --color-ai-batch-bg: rgba(96, 165, 250, 0.15); --color-ai-orchestrator: #34d399; --color-ai-orchestrator-bg: rgba(52, 211, 153, 0.15); --color-ai-output: #a78bfa; --color-ai-output-bg: rgba(167, 139, 250, 0.15); /* Table */ --color-table-header-bg: #1c2952; --color-table-header-text: #94a3b8; --color-table-row-hover: #1c2952; --color-table-row-active: rgba(91, 184, 217, 0.1); --color-table-header-bg-translucent: rgba(30, 39, 66, 0.85); /* Sidebar — slightly darker than surface for visual separation */ --color-sidebar-bg: #121828; --color-sidebar-gradient-start: #121828; --color-sidebar-gradient-end: #1c2952; --color-sidebar-text: #e2e8f0; --color-sidebar-accent: #5bb8d9; --color-sidebar-hover: rgba(255, 255, 255, 0.07); --color-sidebar-active: rgba(91, 184, 217, 0.18); --color-sidebar-muted: rgba(255, 255, 255, 0.45); --color-sidebar-text-muted: rgba(255, 255, 255, 0.7); --color-sidebar-role: rgba(255, 255, 255, 0.35); --color-sidebar-divider: rgba(0, 212, 255, 0.1); --color-sidebar-view-as-bg: rgba(255, 255, 255, 0.05); --color-sidebar-view-as-hover: rgba(255, 255, 255, 0.1); --color-sidebar-view-as-active-bg: rgba(251, 191, 36, 0.2); --color-sidebar-view-as-active-text: #fbbf24; /* Shadows — depth + subtle cyan ambient glow */ --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 212, 255, 0.03); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 212, 255, 0.04); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(0, 212, 255, 0.04); --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.05); --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 212, 255, 0.06); --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.6); --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 8px rgba(0, 212, 255, 0.04); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 212, 255, 0.03); /* Overlays */ --color-overlay: rgba(0, 0, 0, 0.6); --color-overlay-heavy: rgba(0, 0, 0, 0.7); --color-overlay-lightbox: rgba(0, 0, 0, 0.92); /* Badges — scheduled/active aligned with primary cyan-blue */ --color-badge-scheduled-bg: rgba(91, 184, 217, 0.18); --color-badge-scheduled-text: #7ecce5; --color-badge-completed-bg: rgba(52, 211, 153, 0.18); --color-badge-completed-text: #6ee7b7; --color-badge-cancelled-bg: rgba(148, 163, 184, 0.18); --color-badge-cancelled-text: #94a3b8; --color-badge-confirmed-bg: rgba(52, 211, 153, 0.18); --color-badge-confirmed-text: #6ee7b7; --color-badge-pending-bg: rgba(251, 191, 36, 0.18); --color-badge-pending-text: #fbbf24; --color-badge-declined-bg: rgba(248, 113, 113, 0.18); --color-badge-declined-text: #f87171; --color-badge-paid-bg: rgba(52, 211, 153, 0.18); --color-badge-paid-text: #6ee7b7; --color-badge-partial-bg: rgba(251, 191, 36, 0.18); --color-badge-partial-text: #fbbf24; --color-badge-unpaid-bg: rgba(248, 113, 113, 0.18); --color-badge-unpaid-text: #f87171; --color-badge-active-bg: rgba(91, 184, 217, 0.18); --color-badge-active-text: #7ecce5; --color-badge-skipped-bg: rgba(148, 163, 184, 0.18); --color-badge-skipped-text: #94a3b8; --color-badge-dental-bg: rgba(96, 165, 250, 0.18); --color-badge-dental-text: #93c5fd; --color-badge-hygiene-bg: rgba(45, 212, 191, 0.18); --color-badge-hygiene-text: #5eead4; /* Semantic colors for schedule/calendar badges */ --color-danger-light: rgba(248, 113, 113, 0.12); --color-neutral-bg: rgba(148, 163, 184, 0.12); --color-warning-bg: rgba(251, 191, 36, 0.18); --color-warning-border: rgba(251, 191, 36, 0.35); --color-warning-text: #fbbf24; --color-muted-bg: rgba(148, 163, 184, 0.12); --color-holiday: #f6ad55; --color-drag-border: rgba(255, 255, 255, 0.7); --color-drag-handle: rgba(255, 255, 255, 0.15); /* Hover tint */ --color-hover-tint: rgba(91, 184, 217, 0.08); /* Error message */ --color-error-msg-bg: rgba(248, 113, 113, 0.15); --color-error-msg-text: #fca5a5; --color-error-text: #f87171; /* Calendar specific */ --color-cal-now-line: rgba(248, 113, 113, 0.7); --color-cal-hour-line: rgba(130, 180, 220, 0.18); --color-cal-half-line: rgba(130, 180, 220, 0.08); --color-cal-drop-target: rgba(91, 184, 217, 0.1); /* Scrollbars */ --scrollbar-track: #152042; --scrollbar-thumb: #546380; --scrollbar-thumb-hover: #6b7fa0; /* Categorical chart/series palette — brighter hues for dark surfaces */ --chart-cat-1: #38bdf8; --chart-cat-2: #fb923c; --chart-cat-3: #c4b5fd; --chart-cat-4: #5eead4; --chart-cat-5: #fca5a5; --chart-cat-6: #fcd34d; --chart-cat-7: #f9a8d4; --chart-cat-8: #a5b4fc; } /* ============================================================ Curated themes — single axis. Each named theme overrides the deltas it needs; everything else inherits from the light base (:root) or the dark base group above. Light themes: plain (Clinical), warm (Warm), pastel (Pastel) Dark themes: night-sky (Night Sky), contrast (High Contrast), city (City), forest (Forest) Semantic colours (success/danger/warning) inherit unless a theme has a specific legibility reason to override them. ============================================================ */ /* Warm — premium warm: cream paper, espresso sidebar, terracotta accent (light) */ [data-theme="warm"] { --color-bg-body: #f6f1ea; --color-bg-surface: #fffdfa; --color-bg-surface-hover: #f3ece2; --color-bg-surface-active: #ece2d4; --color-bg-muted: #faf6f0; --color-text-primary: #2c2620; --color-text-heading: #3a2f26; --color-text-secondary: #5c5044; --color-text-muted: #8a7c6c; --color-text-subtle: #9a8c7a; --color-border: #e6dac9; --color-border-light: #efe6d8; --color-border-strong: #d4c4ad; --color-primary: #c2683f; --color-primary-hover: #a8542f; --color-primary-light: #fbeade; --color-primary-dark: #8a4626; --color-primary-focus-ring: rgba(194, 104, 63, 0.22); --color-primary-focus-ring-sm: rgba(194, 104, 63, 0.15); --color-primary-subtle: rgba(194, 104, 63, 0.08); --color-primary-subtle-border: rgba(194, 104, 63, 0.12); --color-accent-purple: #d99058; --color-gradient-brand: linear-gradient(135deg, #c2683f, #e0a86f); --color-info: #c2683f; --color-info-bg: #fbeade; --color-info-text: #8a4626; --color-table-header-bg: #f0e8dc; --color-table-header-text: #8a7c6c; --color-table-row-hover: #f3ece2; --color-table-row-active: #fbeade; --color-hover-tint: #faf0e6; /* Espresso sidebar — near-solid, subtle depth (no loud orange gradient) */ --color-sidebar-bg: #382b20; --color-sidebar-gradient-start: #382b20; --color-sidebar-gradient-end: #4a3729; --color-sidebar-accent: #e8a87c; --scrollbar-track: #f6f1ea; --scrollbar-thumb: #d4c4ad; --scrollbar-thumb-hover: #b9a487; } /* Pastel — soft lavender + mint (light) */ [data-theme="pastel"] { --color-bg-body: #f4f3fb; --color-bg-surface: #ffffff; --color-bg-surface-hover: #f1effb; --color-bg-surface-active: #e9e4fa; --color-bg-muted: #f8f7fd; --color-text-primary: #2e2a3f; --color-text-heading: #3a3550; --color-text-secondary: #565070; --color-text-muted: #8b85a3; --color-text-subtle: #9893ad; --color-border: #e2dcf0; --color-border-light: #ece8f7; --color-border-strong: #cdc4e6; --color-primary: #7c6fd6; --color-primary-hover: #6a5cc7; --color-primary-light: #ece8fb; --color-primary-dark: #4a3f9e; --color-primary-focus-ring: rgba(124, 111, 214, 0.22); --color-primary-focus-ring-sm: rgba(124, 111, 214, 0.15); --color-primary-subtle: rgba(124, 111, 214, 0.08); --color-primary-subtle-border: rgba(124, 111, 214, 0.12); --color-accent-purple: #4fb6a0; --color-gradient-brand: linear-gradient(135deg, #7c6fd6, #6fd6b8); --color-info: #7c6fd6; --color-info-bg: #ece8fb; --color-info-text: #4a3f9e; --color-table-header-bg: #f1effb; --color-table-header-text: #8b85a3; --color-table-row-hover: #f1effb; --color-table-row-active: #ece8fb; --color-hover-tint: #f1effb; --color-sidebar-bg: #3a3357; --color-sidebar-gradient-start: #5b4fa8; --color-sidebar-gradient-end: #9b8fe0; --color-sidebar-accent: #c7bdf5; --scrollbar-track: #f4f3fb; --scrollbar-thumb: #cdc4e6; --scrollbar-thumb-hover: #b3a8d9; --chart-cat-1: #7c6fd6; --chart-cat-2: #4fb6a0; --chart-cat-3: #e08fb0; --chart-cat-4: #6fa8dc; --chart-cat-5: #e8a87c; --chart-cat-6: #d6c66f; --chart-cat-7: #9b8fe0; --chart-cat-8: #7ec8c0; } /* High Contrast — maximum legibility (dark base) */ [data-theme="contrast"] { --color-bg-body: #000000; --color-bg-surface: #0a0a0a; --color-bg-surface-hover: #1a1a1a; --color-bg-surface-active: #262626; --color-bg-muted: #0a0a0a; --color-text-primary: #ffffff; --color-text-heading: #ffffff; --color-text-secondary: #e5e5e5; --color-text-muted: #d4d4d4; --color-text-placeholder: #a3a3a3; --color-text-subtle: #d4d4d4; --color-border: #5c5c5c; --color-border-light: #404040; --color-border-strong: #ffffff; --color-primary: #00e5ff; --color-primary-hover: #5cf0ff; --color-primary-contrast: #000000; --color-primary-light: rgba(0, 229, 255, 0.18); --color-primary-focus-ring: rgba(0, 229, 255, 0.5); --color-primary-focus-ring-sm: rgba(0, 229, 255, 0.35); --color-primary-subtle: rgba(0, 229, 255, 0.12); --color-primary-subtle-border: rgba(0, 229, 255, 0.2); --color-accent-purple: #d08bff; --color-gradient-brand: linear-gradient(135deg, #00e5ff, #d08bff); --color-success: #00e676; --color-success-text: #69ffb0; --color-danger: #ff5252; --color-danger-text: #ff8a8a; --color-warning: #ffd740; --color-warning-text: #ffe27a; --color-info: #00e5ff; --color-info-text: #5cf0ff; --color-table-header-bg: #1a1a1a; --color-table-header-text: #ffffff; --color-table-row-hover: #1a1a1a; --color-table-row-active: rgba(0, 229, 255, 0.15); --color-hover-tint: rgba(0, 229, 255, 0.1); --color-sidebar-bg: #000000; --color-sidebar-gradient-start: #000000; --color-sidebar-gradient-end: #1a1a1a; --color-sidebar-accent: #00e5ff; --color-sidebar-text: #ffffff; --scrollbar-track: #000000; --scrollbar-thumb: #5c5c5c; --scrollbar-thumb-hover: #ffffff; --chart-cat-1: #00b8ff; --chart-cat-2: #ff9100; --chart-cat-3: #d08bff; --chart-cat-4: #00e6c3; --chart-cat-5: #ff5b5b; --chart-cat-6: #ffd23f; --chart-cat-7: #ff6fb5; --chart-cat-8: #8c9eff; --tooth-healthy-fill: #1a1a1a; --tooth-healthy-stroke: #ffffff; --tooth-cleaning-fill: rgba(0, 230, 118, 0.3); --tooth-cleaning-stroke: #00e676; --tooth-filling-fill: rgba(0, 184, 255, 0.3); --tooth-filling-stroke: #00b8ff; --tooth-crown-fill: rgba(255, 210, 63, 0.3); --tooth-crown-stroke: #ffd23f; --tooth-rct-fill: rgba(255, 91, 91, 0.3); --tooth-rct-stroke: #ff5b5b; --tooth-extraction-fill: #404040; --tooth-extraction-stroke: #d4d4d4; --tooth-implant-fill: #262626; --tooth-implant-stroke: #a3a3a3; --tooth-bridge-fill: rgba(208, 139, 255, 0.3); --tooth-bridge-stroke: #d08bff; --tooth-mixed-fill: rgba(255, 145, 0, 0.3); --tooth-mixed-stroke: #ff9100; } /* City — night skyline: deep blue-black sky, warm amber city-light accent (dark base) */ [data-theme="city"] { --color-bg-body: #0d1018; --color-bg-surface: #161b27; --color-bg-surface-hover: #1f2533; --color-bg-surface-active: #28303f; --color-bg-muted: #131722; --color-text-primary: #e6e9f0; --color-text-heading: #f2f4f8; --color-text-secondary: #c2c8d4; --color-text-muted: #8a92a3; --color-text-subtle: #8a92a3; --color-border: rgba(203, 213, 225, 0.16); --color-border-light: rgba(203, 213, 225, 0.1); --color-border-strong: rgba(203, 213, 225, 0.28); --color-primary: #f5b942; --color-primary-hover: #ffcf6b; --color-primary-contrast: #1a1205; --color-primary-light: rgba(245, 185, 66, 0.15); --color-primary-focus-ring: rgba(245, 185, 66, 0.32); --color-primary-focus-ring-sm: rgba(245, 185, 66, 0.2); --color-primary-subtle: rgba(245, 185, 66, 0.1); --color-primary-subtle-border: rgba(245, 185, 66, 0.15); --color-accent-purple: #fb7185; --color-gradient-brand: linear-gradient(135deg, #f5b942, #fb7185); --color-info: #f5b942; --color-info-bg: rgba(245, 185, 66, 0.15); --color-info-text: #ffcf6b; --color-table-header-bg: #161b27; --color-table-header-text: #8a92a3; --color-table-row-hover: #1f2533; --color-table-row-active: rgba(245, 185, 66, 0.12); --color-hover-tint: rgba(245, 185, 66, 0.07); --color-sidebar-bg: #090b12; --color-sidebar-gradient-start: #090b12; --color-sidebar-gradient-end: #161b27; --color-sidebar-accent: #f5b942; --color-sidebar-active: rgba(245, 185, 66, 0.18); /* Warm ambient glow shadows */ --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(245, 185, 66, 0.05); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 16px rgba(245, 185, 66, 0.06); --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 24px rgba(245, 185, 66, 0.07); --scrollbar-track: #0d1018; --scrollbar-thumb: #2a3346; --scrollbar-thumb-hover: #3a4660; --chart-cat-1: #f5b942; --chart-cat-2: #60a5fa; --chart-cat-3: #fb7185; --chart-cat-4: #34d399; --chart-cat-5: #c4b5fd; --chart-cat-6: #38bdf8; --chart-cat-7: #fcd34d; --chart-cat-8: #f9a8d4; } /* Forest — pine charcoal: near-neutral dark base, emerald only as accent */ [data-theme="forest"] { --color-bg-body: #111714; --color-bg-surface: #1a221e; --color-bg-surface-hover: #232c27; --color-bg-surface-active: #2c3730; --color-bg-muted: #161d19; --color-text-primary: #e7efea; --color-text-heading: #f2f6f3; --color-text-secondary: #c5d0ca; --color-text-muted: #8a968f; --color-text-subtle: #8a968f; --color-border: rgba(52, 211, 153, 0.18); --color-border-light: rgba(52, 211, 153, 0.1); --color-border-strong: rgba(52, 211, 153, 0.28); --color-primary: #34d399; --color-primary-hover: #6ee7b7; --color-primary-contrast: #08120d; --color-primary-light: rgba(52, 211, 153, 0.15); --color-primary-focus-ring: rgba(52, 211, 153, 0.3); --color-primary-focus-ring-sm: rgba(52, 211, 153, 0.2); --color-primary-subtle: rgba(52, 211, 153, 0.1); --color-primary-subtle-border: rgba(52, 211, 153, 0.15); --color-accent-purple: #6ee7b7; --color-gradient-brand: linear-gradient(135deg, #34d399, #6ee7b7); --color-info: #34d399; --color-info-bg: rgba(52, 211, 153, 0.15); --color-info-text: #6ee7b7; --color-table-header-bg: #1a221e; --color-table-header-text: #8a968f; --color-table-row-hover: #232c27; --color-table-row-active: rgba(52, 211, 153, 0.12); --color-hover-tint: rgba(52, 211, 153, 0.07); --color-sidebar-bg: #0e1411; --color-sidebar-gradient-start: #0e1411; --color-sidebar-gradient-end: #1a221e; --color-sidebar-accent: #34d399; --color-sidebar-active: rgba(52, 211, 153, 0.18); --scrollbar-track: #111714; --scrollbar-thumb: #2c3a32; --scrollbar-thumb-hover: #3d4f44; --chart-cat-1: #34d399; --chart-cat-2: #fbbf24; --chart-cat-3: #5eead4; --chart-cat-4: #38bdf8; --chart-cat-5: #fca5a5; --chart-cat-6: #a3e635; --chart-cat-7: #f9a8d4; --chart-cat-8: #c4b5fd; } /* Scrollbars — thin, token-driven (--scrollbar-* set per theme). Scoped to themed roots so non-app pages keep native scrollbars. */ [data-theme] { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } [data-theme] *::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme] *::-webkit-scrollbar-track { background: var(--scrollbar-track); } [data-theme] *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } [data-theme] *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Dot grid background — light themes (Clinical, Warm, Pastel). Dot tint follows the theme's primary via color-mix. */ [data-theme="light"] body, [data-theme="plain"] body, [data-theme="warm"] body, [data-theme="pastel"] body { background: var(--color-bg-body) radial-gradient(circle, color-mix(in srgb, var(--color-primary) 12%, transparent) 1px, transparent 1px); background-size: 24px 24px; } /* Starry night sky background — dark mode */ @keyframes sky-mesh-shift { 0%, 100% { background-position: 0% 50%, 100% 50%, 50% 100%; } 33% { background-position: 100% 0%, 0% 100%, 50% 0%; } 66% { background-position: 50% 100%, 50% 0%, 0% 50%; } } [data-theme="dark"] body, [data-theme="night-sky"] body { background: var(--color-bg-body); } [data-theme="dark"] body::before, [data-theme="night-sky"] body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 70% 50% at 15% 20%, rgba(80, 40, 160, 0.08), transparent 50%), radial-gradient(ellipse 50% 40% at 75% 65%, rgba(0, 160, 255, 0.06), transparent 50%), radial-gradient(ellipse 60% 35% at 50% 85%, rgba(120, 50, 180, 0.05), transparent 50%), radial-gradient(ellipse 40% 30% at 85% 15%, rgba(0, 212, 255, 0.04), transparent 50%); background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%; animation: sky-mesh-shift 25s ease-in-out infinite; pointer-events: none; z-index: 0; will-change: background-position; } /* Dark vignette — edges fade to black */ [data-theme="dark"] .container::before, [data-theme="dark"] .login-wrapper::before, [data-theme="night-sky"] .container::before, [data-theme="night-sky"] .login-wrapper::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.35) 100%); pointer-events: none; z-index: -1; } [data-theme="dark"] body::after, [data-theme="night-sky"] body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 50% 40% at 60% 30%, rgba(0, 140, 220, 0.04), transparent 50%), radial-gradient(ellipse 40% 50% at 30% 70%, rgba(100, 40, 160, 0.035), transparent 50%); background-size: 200% 200%, 200% 200%; animation: sky-mesh-shift 35s ease-in-out infinite reverse; pointer-events: none; z-index: 0; will-change: background-position; } #star-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* ============================================================ Ambient scenery — per-theme vector silhouettes (SVG), fixed to the bottom of the viewport, faded out toward the top, behind the (opaque) content cards. Same layering as the night-sky starfield. ============================================================ */ [data-theme="forest"] body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 48vh; /* SVG trees layered OVER a soft green glow rising from the bottom — the glow shows through the transparent sky so the dark pines silhouette against it (instead of dark-on-dark, which was invisible). */ background: url("/static/icons/silhouette-forest.svg") no-repeat bottom center / 100% 100%, linear-gradient(to top, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.06) 38%, transparent 78%); pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 96%); mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 96%); } [data-theme="city"] body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 48vh; /* Skyline over a warm amber "city-lights" glow rising from the bottom. */ background: url("/static/icons/silhouette-city.svg") no-repeat bottom center / 100% 100%, linear-gradient(to top, rgba(245, 185, 66, 0.16), rgba(245, 185, 66, 0.06) 38%, transparent 78%); pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 96%); mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 96%); } /* Demo environment banner (MIC-324) — in theme.css so all pages get it */ .demo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-sidebar) + 10); background: var(--color-info-bg); border-bottom: 1px solid var(--color-info); color: var(--color-info-text); display: flex; align-items: center; justify-content: center; padding: 0.4rem 1rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; /* Pin line-height so banner height is identical regardless of the host page's body line-height (e.g. landing page sets 1.6, login uses default). */ line-height: 1.2; } @media (max-width: 767px) { .demo-banner { font-size: 0.75rem; padding: 0.35rem 0.75rem; line-height: 1.2; } } [data-theme="dark"] .demo-banner, [data-theme="night-sky"] .demo-banner { background: rgba(22, 30, 60, 0.35); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); color: #dce8f5; border-bottom: 1px solid rgba(0, 212, 255, 0.3); box-shadow: 0 1px 8px rgba(0, 212, 255, 0.12); } [data-theme="light"] .demo-banner, [data-theme="plain"] .demo-banner { background: rgba(240, 245, 248, 0.65); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom-color: rgba(43, 140, 181, 0.2); box-shadow: 0 1px 8px rgba(43, 140, 181, 0.08); } /* Fallback for browsers without backdrop-filter */ @supports not (backdrop-filter: blur(1px)) { [data-theme="dark"] .demo-banner, [data-theme="night-sky"] .demo-banner { background: #264060; } [data-theme="light"] .demo-banner, [data-theme="plain"] .demo-banner { background: var(--color-info-bg); } } /* Reduced motion — respects user OS/browser preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }