/* ========================================================================== SOMANOTES — TERMINAL CORE THEME Global definitions for the "Phosphor/Terminal" aesthetic. ========================================================================== */ :root[data-theme="terminal"], body[data-theme="terminal"] { /* — Backgrounds: Warm Void Spectrum — */ --term-bg-void: #0C0B0A; --term-bg-surface: #13120F; --term-bg-elevated: #1B1A16; --term-bg-header: #0E0D0B; --term-bg-input: #17160F; /* — Foregrounds: Warm Whites — */ --term-fg-primary: #E8E4DC; --term-fg-secondary: #A09888; --term-fg-muted: #8A8278; --term-fg-inverse: #0C0B0A; /* — Borders: Warm Structure — */ --term-border-subtle: #1E1C18; --term-border-default:#2A2720; --term-border-strong: #3A3630; /* — Accent: Electric Mint — */ --term-accent: #00FFD0; --term-accent-dim: rgba(0, 255, 208, 0.40); --term-accent-subtle: rgba(0, 255, 208, 0.10); --term-accent-ghost: rgba(0, 255, 208, 0.05); /* — Decorative: Art Deco Gold — */ --term-gold: #D4A857; --term-gold-dim: rgba(212, 168, 87, 0.35); --term-gold-subtle: rgba(212, 168, 87, 0.10); --term-gold-ghost: rgba(212, 168, 87, 0.05); /* — Clinical Status — */ --term-status-idle: #564E42; --term-status-generating: #3B82F6; --term-status-ready: #22C55E; --term-status-editing: #F59E0B; --term-status-error: #EF4444; /* Severity-mapped aliases (sidebar, patient cards) */ --term-status-critical: #EF4444; --term-status-worsening: #F59E0B; --term-status-stable: #22C55E; /* — Clinical Severity (patient header badges, avatar states) — */ --term-severity-critical: #EF4444; --term-severity-worsening: #FFAA00; --term-severity-stable: #00FFD0; --term-severity-improving: #4488FF; /* — Multi-Layer Glow Effects (Phosphor Gas Simulation) — */ --term-glow-accent: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 8px rgba(0, 255, 208, 0.35), 0 0 24px rgba(0, 255, 208, 0.12); --term-glow-accent-intense: 0 0 4px rgba(255, 255, 255, 0.6), 0 0 16px rgba(0, 255, 208, 0.50), 0 0 36px rgba(0, 255, 208, 0.20); --term-glow-gold: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(212, 168, 87, 0.25), 0 0 24px rgba(212, 168, 87, 0.10); --term-glow-gold-intense: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 14px rgba(212, 168, 87, 0.40), 0 0 32px rgba(212, 168, 87, 0.15); --term-glow-generating: 0 0 8px rgba(59, 130, 246, 0.30), 0 0 20px rgba(59, 130, 246, 0.10); --term-glow-ready: 0 0 8px rgba(34, 197, 94, 0.30), 0 0 20px rgba(34, 197, 94, 0.10); --term-glow-editing: 0 0 8px rgba(245, 158, 11, 0.30), 0 0 20px rgba(245, 158, 11, 0.10); --term-glow-error: 0 0 8px rgba(239, 68, 68, 0.40), 0 0 16px rgba(239, 68, 68, 0.15); /* Severity-mapped glow aliases (sidebar stats, patient header) */ --term-glow-critical: 0 0 8px rgba(239, 68, 68, 0.40), 0 0 16px rgba(239, 68, 68, 0.15); --term-glow-worsening: 0 0 8px rgba(245, 158, 11, 0.30), 0 0 20px rgba(245, 158, 11, 0.10); /* Ghost-level glow for empty state cards */ --term-glow-accent-ghost: 0 0 4px rgba(0, 255, 208, 0.08), 0 0 12px rgba(0, 255, 208, 0.03); /* — Typography — */ --term-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; --term-font-display: 'Outfit', 'Inter', -apple-system, sans-serif; --term-font-body: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* — Type Scale — */ --term-text-xs: 0.6875rem; /* 11px */ --term-text-sm: 0.8125rem; /* 13px */ --term-text-base: 0.9375rem; /* 15px */ --term-text-lg: 1.125rem; /* 18px */ --term-text-xl: 1.5rem; /* 24px */ --term-text-2xl: 2rem; /* 32px */ --term-text-huge: 4.5rem; /* 72px */ /* — Letter Spacing — */ --term-tracking-tight: -0.01em; --term-tracking-normal: 0; --term-tracking-wide: 0.05em; --term-tracking-wider: 0.10em; --term-tracking-widest: 0.20em; --term-tracking-display: 0.15em; /* — Spacing — */ --term-space-xs: 4px; --term-space-sm: 8px; --term-space-md: 12px; --term-space-lg: 16px; --term-space-xl: 24px; --term-space-2xl: 32px; --term-space-3xl: 48px; /* — Geometry — */ --term-radius-none: 0; --term-radius-sm: 2px; --term-corner-size: 16px; --term-corner-offset: 6px; --term-corner-width: 2px; /* — Animation — */ --term-duration-fast: 150ms; --term-duration-normal: 300ms; --term-duration-theatrical: 500ms; --term-duration-entrance: 600ms; --term-easing: cubic-bezier(0.4, 0, 0.2, 1); --term-easing-dramatic: cubic-bezier(0.22, 1, 0.36, 1); --term-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* — Texture — */ --term-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.018'/%3E%3C/svg%3E"); } /* ========================================================================== GLOBAL BASE STYLES & BOOT SEQUENCE ========================================================================== */ /* FIX (2026-02-26): The 100% keyframe previously used filter: brightness(1) contrast(1) which is visually identical to filter: none BUT creates a new containing block for position: fixed descendants (per CSS spec). This broke toast notifications — they scrolled with the page instead of staying viewport-fixed, making them invisible when the user scrolled down. Changed final keyframe to filter: none. */ @keyframes term-boot-sequence { 0% { filter: brightness(0) contrast(1.2); opacity: 0; } 10% { opacity: 0.8; filter: brightness(1.5) contrast(1.5); } 15% { opacity: 0.4; } 20% { opacity: 1; filter: brightness(1) contrast(1.1); } 100% { filter: none; opacity: 1; } } body[data-theme="terminal"] { animation: term-boot-sequence 1.2s var(--term-easing) forwards; background-color: var(--term-bg-void); color: var(--term-fg-primary); font-family: var(--term-font-body); font-size: var(--term-text-base); line-height: 1.6; margin: 0; padding: 0; } /* Base link and text selection styles */ body[data-theme="terminal"] ::selection { background: rgba(0, 255, 208, 0.20); color: var(--term-fg-primary); } body[data-theme="terminal"] ::-moz-selection { background: rgba(0, 255, 208, 0.20); color: var(--term-fg-primary); } /* Global scrollbars for terminal theme */ body[data-theme="terminal"] ::-webkit-scrollbar { width: 6px; height: 6px; } body[data-theme="terminal"] ::-webkit-scrollbar-track { background: var(--term-bg-void); } body[data-theme="terminal"] ::-webkit-scrollbar-thumb { background: var(--term-border-default); border-radius: var(--term-radius-none); } body[data-theme="terminal"] ::-webkit-scrollbar-thumb:hover { background: var(--term-border-strong); } body[data-theme="terminal"] *:focus-visible { outline: 2px solid var(--term-accent); outline-offset: 2px; } /* Respect prefers-reduced-motion — disable boot animation and text bloom */ @media (prefers-reduced-motion: reduce) { body[data-theme="terminal"] { animation: none; } } /* High contrast mode — disable decorative text-shadow for clinical readability. WHY: The 1px text-shadow in terminal-layout.css is decorative. Under high-contrast preferences, even subtle blur can reduce clarity of lab values and dosages. CODE REVIEW [CR-2.4]: Global body text-shadow confirmed as low-impact (1px / 0.3 opacity) but this gate ensures clinical readability under accessibility preferences. The body-level text-shadow itself was kept — removing it breaks the phosphor CRT aesthetic for standard users, and the blur is imperceptible on modern displays at clinical viewing distances. */ @media (prefers-contrast: more) { body[data-theme="terminal"] { text-shadow: none !important; } }