/* ============================================================================ theme-memoro-dark.css — MEMORO Dark Theme A premium dark theme with sophisticated glass effects. Applied when .theme-dark class is present on or ancestor. Design principles: - Deep, rich blacks with subtle warmth - Translucent glass surfaces with layered depth - Subtle accent tints for visual interest - Enhanced shadows for floating elements ============================================================================ */ .theme-dark { /* ------------------------------------------------------------------ COLOR SCALE: Neutrals (inverted, with subtle warmth) ------------------------------------------------------------------ */ --color-gray-50: #141416; --color-gray-100: #1c1c1f; --color-gray-200: #2a2a2e; --color-gray-300: #3d3d42; --color-gray-400: #5c5c63; --color-gray-500: #8e8e96; --color-gray-600: #b4b4bc; --color-gray-700: #d4d4da; --color-gray-800: #ececf0; --color-gray-900: #f8f8fa; /* ------------------------------------------------------------------ COLOR SCALE: Brand Blue (vibrant for dark backgrounds) ------------------------------------------------------------------ */ --color-blue-50: #0d1f3c; --color-blue-100: #1e3a5f; --color-blue-500: #60a5fa; --color-blue-600: #3b82f6; --color-blue-700: #2563eb; /* ------------------------------------------------------------------ SEMANTIC: Backgrounds - Deep, layered surfaces ------------------------------------------------------------------ */ --color-bg: #0a0a0c; --color-bg-muted: #111114; --color-bg-panel: #161619; --color-bg-subtle: #1c1c20; --color-bg-white: #1a1a1e; --color-bg-hover: rgba(255, 255, 255, 0.06); --color-bg-hover-subtle: rgba(255, 255, 255, 0.04); --color-bg-hover-strong: rgba(255, 255, 255, 0.1); --color-bg-active: rgba(255, 255, 255, 0.12); --color-header-bg: transparent; --color-bg-rgb: 10, 10, 12; --color-bg-input: var(--input-bg); /* Glass panel background - for cards and elevated surfaces */ --color-bg-panel-glass: rgba(22, 22, 26, 0.8); /* Default background gradients — dark variants, referenced by id from JS */ --bg-gradient-warm-stone: linear-gradient(145deg, #2a2520 0%, #1f1b17 50%, #171310 100%); --bg-gradient-soft-sky: linear-gradient(145deg, #1a2030 0%, #151b28 50%, #101620 100%); --bg-gradient-dawn: linear-gradient(145deg, #2a1d18 0%, #201510 50%, #18100a 100%); --bg-gradient-sage: linear-gradient(145deg, #1a2018 0%, #151a12 50%, #10150d 100%); --bg-gradient-lavender: linear-gradient(145deg, #221a2a 0%, #1a1520 50%, #141018 100%); --bg-gradient-midnight: linear-gradient(145deg, #12121a 0%, #0d0d14 50%, #08080e 100%); /* Squared paper — dark surface with faint grid lines (SVG tile for scrolling) */ --bg-squared-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23141416'/%3E%3Cpath d='M23.5 0v24M0 23.5h24' stroke='%231b1b1e' stroke-width='1'/%3E%3C/svg%3E"); --bg-squared-paper-color: #141416; --bg-gradient-squared-paper: var(--bg-squared-paper); --default-background: var(--bg-squared-paper); /* Query bar */ --query-bar-shadow-top: 0 -4px 16px rgba(0, 0, 0, 0.3); /* ------------------------------------------------------------------ SEMANTIC: Text - High contrast for readability ------------------------------------------------------------------ */ --color-text-main: #f0f0f4; --color-text-secondary: #d8d8e0; --color-text-muted: #b8b8c2; --color-text-subtle: #6b6b75; --color-text-contrast: #fff; --color-text-inverse: var(--color-gray-50); /* ------------------------------------------------------------------ SEMANTIC: Borders - Subtle definition ------------------------------------------------------------------ */ --color-border: rgba(255, 255, 255, 0.1); --color-border-light: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.15); --color-border-dark: rgba(255, 255, 255, 0.2); --color-border-overlay: var(--color-border-strong); --color-border-subtle: rgba(255, 255, 255, 0.04); /* ------------------------------------------------------------------ SHADOWS - Deep, layered for dimension ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2), 0 16px 32px rgba(0, 0, 0, 0.25); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2), 0 16px 32px rgba(0, 0, 0, 0.25), 0 32px 64px rgba(0, 0, 0, 0.3); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2); --shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.25); --shadow-window: var(--shadow-xl); /* Glow shadows for highlighted elements */ --shadow-glow-brand: 0 0 20px rgba(255, 255, 255, 0.15); --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3); --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.3); /* ------------------------------------------------------------------ SEMANTIC: Brand — Neutral (no accent color; entity tints provide color) ------------------------------------------------------------------ */ --color-brand: var(--color-gray-800); --color-brand-hover: var(--color-gray-700); --color-brand-light: rgba(255, 255, 255, 0.1); --color-brand-soft: rgba(255, 255, 255, 0.15); --color-brand-subtle: rgba(255, 255, 255, 0.06); --color-accent: var(--color-text-main); --color-brand-muted: var(--color-gray-600); /* Primary action color (alias for brand) */ --color-primary: var(--color-brand); --color-primary-hover: var(--color-brand-hover); --color-primary-bg: rgba(255, 255, 255, 0.1); /* Action color - For send buttons, primary CTAs */ --color-action: var(--color-brand); --color-action-hover: var(--color-brand-hover); --color-brand-rgb: 236, 236, 240; --color-primary-rgb: 236, 236, 240; --color-on-primary: #0a0a0c; /* ------------------------------------------------------------------ SEMANTIC: Status - Danger (vibrant on dark) ------------------------------------------------------------------ */ --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-dark: #ef4444; --color-danger-light: rgba(239, 68, 68, 0.15); --color-danger-muted: rgba(239, 68, 68, 0.25); --color-danger-subtle: rgba(239, 68, 68, 0.1); --color-danger-border: rgba(239, 68, 68, 0.4); --color-danger-border-active: rgba(239, 68, 68, 0.6); /* ------------------------------------------------------------------ SEMANTIC: Status - Success (vibrant on dark) ------------------------------------------------------------------ */ --color-success: #4ade80; --color-success-hover: #86efac; --color-success-light: rgba(34, 197, 94, 0.15); --color-success-muted: rgba(34, 197, 94, 0.25); --color-success-subtle: rgba(34, 197, 94, 0.1); --color-success-border: rgba(34, 197, 94, 0.4); --color-success-dark: #22c55e; /* ------------------------------------------------------------------ SEMANTIC: Status - Warning (warm amber on dark) ------------------------------------------------------------------ */ --color-warning: #fbbf24; --color-warning-hover: #fcd34d; --color-warning-light: rgba(251, 191, 36, 0.15); --color-warning-muted: rgba(251, 191, 36, 0.25); --color-warning-dark: #f59e0b; --color-attention: var(--color-warning); --color-attention-muted: var(--color-warning-muted); --color-warning-subtle: rgba(251, 191, 36, 0.1); /* ------------------------------------------------------------------ SEMANTIC: Status - Info (blue) ------------------------------------------------------------------ */ --color-info: #60a5fa; --color-info-muted: rgba(59, 130, 246, 0.2); /* ------------------------------------------------------------------ SEMANTIC: Entity/Event Types (vibrant for dark backgrounds) ------------------------------------------------------------------ */ /* Call / Org (emerald) */ --color-entity-call: #34d399; --color-entity-call-bg: rgba(52, 211, 153, 0.15); /* Trip / Topic (amber) */ --color-entity-trip: #fbbf24; --color-entity-trip-bg: rgba(251, 191, 36, 0.15); --color-entity-trip-dark: #f59e0b; /* Course / Project (purple) */ --color-entity-course: #a78bfa; --color-entity-course-bg: rgba(167, 139, 250, 0.15); /* Note (indigo) */ --color-entity-note: #818cf8; --color-entity-note-bg: rgba(129, 140, 248, 0.15); /* Task (green) */ --color-entity-task: #4ade80; --color-entity-task-bg: rgba(74, 222, 128, 0.15); /* Person (stone) */ --color-entity-person: #a8a29e; --color-entity-person-bg: rgba(168, 162, 158, 0.15); /* Org (teal) */ --color-entity-org: #2dd4bf; --color-entity-org-bg: rgba(45, 212, 191, 0.15); /* Project (purple) */ --color-entity-project: #a78bfa; --color-entity-project-bg: rgba(167, 139, 250, 0.15); /* Relationship / Place (pink) */ --color-entity-relationship: #f472b6; --color-entity-relationship-bg: rgba(244, 114, 182, 0.15); --color-entity-place: #f472b6; /* AI gradient - subtle purple glow */ --color-ai-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%); --color-ai-bg: rgba(139, 92, 246, 0.1); /* ------------------------------------------------------------------ SCROLLBAR STYLING ------------------------------------------------------------------ */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ------------------------------------------------------------------ INPUT STYLING ------------------------------------------------------------------ */ --input-bg: rgba(255, 255, 255, 0.04); --input-bg-hover: rgba(255, 255, 255, 0.06); --input-bg-focus: rgba(255, 255, 255, 0.08); --input-border: rgba(255, 255, 255, 0.1); --input-border-focus: var(--color-gray-500); /* ------------------------------------------------------------------ FOCUS RING — Neutral (overridden per-entity via --entity-focus-color) ------------------------------------------------------------------ */ --entity-focus-color: transparent; --color-focus: rgba(236, 236, 240, 0.3); --color-focus-ring: 0 0 0 3px var(--color-focus); --focus-ring: var(--color-focus-ring); /* ------------------------------------------------------------------ COLOR SCHEME Tell browsers this is a dark theme ------------------------------------------------------------------ */ color-scheme: dark; } /* ============================================================================ DARK THEME COMPONENT OVERRIDES Specific adjustments for components in dark mode ============================================================================ */ /* Buttons */ .theme-dark .btn-secondary { background: var(--color-bg-hover); border-color: var(--color-border); color: var(--color-text-main); } .theme-dark .btn-secondary:hover { background: var(--color-bg-hover-strong); border-color: var(--color-border-strong); } /* Dividers */ .theme-dark hr, .theme-dark .divider { border-color: var(--color-border); } /* Code blocks */ .theme-dark pre, .theme-dark code { background: rgba(0, 0, 0, 0.3); border-color: var(--color-border); } /* Scrollbar styling */ .theme-dark ::-webkit-scrollbar { width: 8px; height: 8px; } .theme-dark ::-webkit-scrollbar-track { background: var(--scrollbar-track); } .theme-dark ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } .theme-dark ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Selection */ .theme-dark ::selection { background: rgba(255, 255, 255, 0.25); color: var(--color-text-contrast); } /* Links */ .theme-dark a { color: var(--color-text-main); } .theme-dark a:hover { color: var(--color-text-muted); } /* Focus visible */ .theme-dark :focus-visible { outline: 2px solid var(--entity-focus-color, var(--color-gray-500)); outline-offset: 2px; } /* Buttons should not render brand focus rings */ .theme-dark button:focus-visible, .theme-dark [role="button"]:focus-visible { outline: none; } /* Modal overlays */ .theme-dark .modal-backdrop { background: rgba(0, 0, 0, 0.7); } .theme-dark .modal { background: var(--theme-window-bg, var(--color-bg-panel)); border: var(--theme-window-border); box-shadow: var(--shadow-xl); } /* Tab active states */ .theme-dark .tab.is-active { background: var(--color-bg-hover); border-color: var(--color-border-strong); } /* Badge/pill styling */ .theme-dark .badge { background: var(--color-bg-hover); border: 1px solid var(--color-border); } /* Checkbox/Radio custom styling */ .theme-dark input[type="checkbox"], .theme-dark input[type="radio"] { background: var(--input-bg); border-color: var(--color-border-strong); } .theme-dark input[type="checkbox"]:checked, .theme-dark input[type="radio"]:checked { background: var(--color-brand); border-color: var(--color-brand); } /* Empty states */ .theme-dark .empty-state { color: var(--color-text-muted); } .theme-dark .empty-state .icon { opacity: 0.4; }