224 lines
6.4 KiB
CSS
224 lines
6.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* ----------------------------------------------------
|
|
Mode 1: Light — Daylight Clinical
|
|
---------------------------------------------------- */
|
|
:root,
|
|
[data-theme="light"] {
|
|
--bg-app: #F8FAFC;
|
|
--bg-surface: #FFFFFF;
|
|
--bg-surface-elevated: #F1F5F9;
|
|
--bg-surface-hover: #E2E8F0;
|
|
--bg-overlay: rgba(15, 23, 42, 0.4);
|
|
|
|
--text-primary: #0F172A;
|
|
--text-secondary: #334155;
|
|
--text-muted: #64748B;
|
|
--text-inverse: #FFFFFF;
|
|
|
|
--border-subtle: #E2E8F0;
|
|
--border-active: #CBD5E1;
|
|
--border-accent: #0D9488;
|
|
|
|
--accent-primary: #0D9488;
|
|
--accent-hover: #0F766E;
|
|
--accent-soft: #E6FFFA;
|
|
--accent-glow: rgba(13, 148, 136, 0.2);
|
|
|
|
--status-danger: #DC2626;
|
|
--status-danger-bg: #FEF2F2;
|
|
--status-warning: #D97706;
|
|
--status-warning-bg: #FFFBEB;
|
|
--status-success: #16A34A;
|
|
--status-success-bg: #F0FDF4;
|
|
|
|
--shadow-surface: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
|
|
--shadow-elevated: 0 10px 30px -4px rgba(15, 23, 42, 0.08);
|
|
|
|
--blur-surface: none;
|
|
--motion-duration-fast: 120ms;
|
|
--motion-duration-normal: 180ms;
|
|
--motion-duration-slow: 280ms;
|
|
--motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ----------------------------------------------------
|
|
Mode 2: Dark — Night Laboratory
|
|
---------------------------------------------------- */
|
|
[data-theme="dark"] {
|
|
--bg-app: #080D1A;
|
|
--bg-surface: #0F172A;
|
|
--bg-surface-elevated: #1E293B;
|
|
--bg-surface-hover: #334155;
|
|
--bg-overlay: rgba(3, 7, 18, 0.7);
|
|
|
|
--text-primary: #F8FAFC;
|
|
--text-secondary: #CBD5E1;
|
|
--text-muted: #94A3B8;
|
|
--text-inverse: #0F172A;
|
|
|
|
--border-subtle: rgba(255, 255, 255, 0.1);
|
|
--border-active: rgba(255, 255, 255, 0.2);
|
|
--border-accent: #0EA5E9;
|
|
|
|
--accent-primary: #0EA5E9;
|
|
--accent-hover: #38BDF8;
|
|
--accent-soft: rgba(14, 165, 233, 0.15);
|
|
--accent-glow: rgba(14, 165, 233, 0.3);
|
|
|
|
--status-danger: #EF4444;
|
|
--status-danger-bg: rgba(239, 68, 68, 0.15);
|
|
--status-warning: #F59E0B;
|
|
--status-warning-bg: rgba(245, 158, 11, 0.15);
|
|
--status-success: #10B981;
|
|
--status-success-bg: rgba(16, 185, 129, 0.15);
|
|
|
|
--shadow-surface: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
|
|
--shadow-elevated: 0 12px 40px -4px rgba(0, 0, 0, 0.6);
|
|
|
|
--blur-surface: none;
|
|
--motion-duration-fast: 150ms;
|
|
--motion-duration-normal: 220ms;
|
|
--motion-duration-slow: 350ms;
|
|
--motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
/* ----------------------------------------------------
|
|
Mode 3: Heavy Glass — Liquid Intelligence
|
|
---------------------------------------------------- */
|
|
[data-theme="glass"] {
|
|
--bg-app: #030712;
|
|
--bg-surface: rgba(15, 23, 42, 0.65);
|
|
--bg-surface-elevated: rgba(30, 41, 59, 0.75);
|
|
--bg-surface-hover: rgba(51, 65, 85, 0.85);
|
|
--bg-overlay: rgba(3, 7, 18, 0.85);
|
|
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #E2E8F0;
|
|
--text-muted: #A0ABBA;
|
|
--text-inverse: #030712;
|
|
|
|
--border-subtle: rgba(255, 255, 255, 0.14);
|
|
--border-active: rgba(56, 189, 248, 0.45);
|
|
--border-accent: #2DD4BF;
|
|
|
|
--accent-primary: #2DD4BF;
|
|
--accent-hover: #38BDF8;
|
|
--accent-soft: rgba(45, 212, 191, 0.18);
|
|
--accent-glow: rgba(45, 212, 191, 0.45);
|
|
|
|
--status-danger: #F87171;
|
|
--status-danger-bg: rgba(248, 113, 113, 0.2);
|
|
--status-warning: #FBBF24;
|
|
--status-warning-bg: rgba(251, 191, 36, 0.2);
|
|
--status-success: #34D399;
|
|
--status-success-bg: rgba(52, 211, 153, 0.2);
|
|
|
|
--shadow-surface: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
--shadow-elevated: 0 20px 50px 0 rgba(0, 0, 0, 0.55);
|
|
|
|
--blur-surface: blur(20px);
|
|
--motion-duration-fast: 180ms;
|
|
--motion-duration-normal: 280ms;
|
|
--motion-duration-slow: 450ms;
|
|
--motion-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
}
|
|
|
|
/* Ambient Background Orb Animations for Glass & Dark Modes */
|
|
@keyframes orb-float-1 {
|
|
0%, 100% { transform: translate(0px, 0px) scale(1); }
|
|
50% { transform: translate(40px, -60px) scale(1.15); }
|
|
}
|
|
|
|
@keyframes orb-float-2 {
|
|
0%, 100% { transform: translate(0px, 0px) scale(1); }
|
|
50% { transform: translate(-50px, 50px) scale(1.1); }
|
|
}
|
|
|
|
@keyframes beam-pulse {
|
|
0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 4px var(--accent-primary)); }
|
|
50% { opacity: 1; filter: drop-shadow(0 0 12px var(--accent-primary)); }
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-subtle);
|
|
border-radius: 9999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-active);
|
|
}
|
|
|
|
/* Base resets */
|
|
body {
|
|
background-color: var(--bg-app);
|
|
color: var(--text-primary);
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
transition: background-color var(--motion-duration-normal) var(--motion-ease),
|
|
color var(--motion-duration-normal) var(--motion-ease);
|
|
}
|
|
|
|
/* Glass-specific surface reflection utilities */
|
|
[data-theme="glass"] .glass-panel {
|
|
background: var(--bg-surface);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid var(--border-subtle);
|
|
box-shadow: var(--shadow-surface), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
[data-theme="glass"] .glass-content-card {
|
|
background: rgba(11, 18, 33, 0.88);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
[data-theme="glass"] .glass-beam-glow {
|
|
box-shadow: 0 0 20px var(--accent-glow), inset 0 0 10px var(--accent-glow);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
/* High readability styling for medical documents */
|
|
.medical-document-body {
|
|
font-size: 0.965rem;
|
|
line-height: 1.65;
|
|
color: var(--text-primary);
|
|
}
|
|
.medical-document-body h2 {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
.medical-document-body p {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.medical-document-body ul {
|
|
list-style-type: disc;
|
|
padding-left: 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.medical-document-body li {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Accessible focus ring */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--accent-primary);
|
|
outline-offset: 2px;
|
|
}
|