/* ========================================================================== Vitruvex v2 — Theme System Light + Dark themes via [data-theme] selector on Dark theme is the hero (Glass Cockpit aesthetic) ========================================================================== */ /* ---------- Shared tokens ---------- */ :root { --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --sidebar-width: 260px; --sidebar-width-collapsed: 68px; /* v1-equivalent status badge palette */ --status-draft-bg: #fef3c7; --status-draft-text: #92400e; --status-submitted-bg: #dbeafe; --status-submitted-text: #1e3a8a; --status-certified-bg: #d1fae5; --status-certified-text: #065f46; --status-paid-bg: #e0e7ff; --status-paid-text: #3730a3; --status-rejected-bg: #fee2e2; --status-rejected-text: #991b1b; --status-approved-bg: #d4edda; --status-approved-text: #155724; --status-under-review-bg: #cce5ff; --status-under-review-text: #004085; --status-closed-bg: #e5e7eb; --status-closed-text: #64748b; } /* ---------- Light Theme ---------- */ [data-theme="light"] { /* Backgrounds */ --bg-page: #ffffff; --bg-card: #f5f7fa; --bg-sidebar: #f7f9fd; --bg-header: #0c496d; --bg-input: #ffffff; --bg-hover: #e9eef4; --bg-active: #e9eef4; --bg-elevated: #f5f7fa; --bg-subtle: #edf1f5; --modal-body-bg: #ffffff; --modal-chrome-bg: var(--bg-sidebar); /* Text */ --text-primary: #0f172a; --text-secondary: #64748b; --text-muted: #94a3b8; --text-inverse: #ffffff; /* Accent */ --accent: #11608d; --accent-hover: #0f557d; --accent-subtle: rgba(17, 96, 141, 0.12); --accent-glow: rgba(17, 96, 141, 0.18); --accent-header: var(--accent); --accent-header-hover: var(--accent-hover); --accent-header-subtle: var(--accent-subtle); /* Borders */ --border: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.12); --sidebar-border: 1px solid rgba(255, 255, 255, 0.05); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08); /* Glassmorphism — subtle in light */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-blur: blur(10px); /* Semantic colors */ --color-danger: #dc2626; --color-danger-bg: #fef2f2; --color-danger-border: #fecaca; --color-warning: #d97706; --color-warning-bg: #fffbeb; --color-warning-border: #fde68a; --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-success-border: #bbf7d0; --color-info: #0ea5e9; --color-info-bg: #f0f9ff; --color-info-border: #bae6fd; /* Omnibar */ --omnibar-bg: #ffffff; --omnibar-border: rgba(0, 0, 0, 0.08); --omnibar-focus-border: var(--accent); --omnibar-focus-shadow: 0 15px 50px rgba(17, 96, 141, 0.12); --omnibar-btn-bg: var(--text-primary); --omnibar-btn-color: #ffffff; /* Nav */ --nav-icon-opacity: 0.6; --nav-active-icon-color: var(--accent); --nav-label-color: #94a3b8; } /* ---------- Dark Theme (Glass Cockpit) ---------- */ [data-theme="dark"] { /* Backgrounds */ --bg-page: #0f172a; --bg-card: #1e293b; --bg-sidebar: rgba(15, 23, 42, 0.8); --bg-header: #0c496d; --bg-input: rgba(30, 41, 59, 0.6); --bg-hover: rgba(56, 189, 248, 0.08); --bg-active: rgba(56, 189, 248, 0.12); --bg-elevated: rgba(30, 41, 59, 0.6); --bg-subtle: rgba(30, 41, 59, 0.3); --modal-body-bg: #1e293b; --modal-chrome-bg: #0f172a; /* Text */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --text-inverse: #0f172a; /* Accent */ --accent: #38bdf8; --accent-hover: #7dd3fc; --accent-subtle: rgba(56, 189, 248, 0.1); --accent-glow: rgba(56, 189, 248, 0.2); --accent-header: var(--accent); --accent-header-hover: var(--accent-hover); --accent-header-subtle: rgba(56, 189, 248, 0.12); /* Borders */ --border: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.1); --sidebar-border: 1px solid rgba(255, 255, 255, 0.05); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5); /* Glassmorphism — hero effect in dark */ --glass-bg: rgba(30, 41, 59, 0.6); --glass-blur: blur(10px); /* Semantic colors */ --color-danger: #f87171; --color-danger-bg: rgba(239, 68, 68, 0.1); --color-danger-border: rgba(239, 68, 68, 0.3); --color-warning: #fbbf24; --color-warning-bg: rgba(234, 179, 8, 0.1); --color-warning-border: rgba(234, 179, 8, 0.3); --color-success: #4ade80; --color-success-bg: rgba(74, 222, 128, 0.1); --color-success-border: rgba(74, 222, 128, 0.3); --color-info: #38bdf8; --color-info-bg: rgba(56, 189, 248, 0.1); --color-info-border: rgba(56, 189, 248, 0.3); /* Omnibar */ --omnibar-bg: rgba(30, 41, 59, 0.6); --omnibar-border: rgba(56, 189, 248, 0.3); --omnibar-focus-border: #38bdf8; --omnibar-focus-shadow: 0 0 30px rgba(56, 189, 248, 0.2); --omnibar-btn-bg: linear-gradient(135deg, #38bdf8, #2563eb); --omnibar-btn-color: #ffffff; /* Nav */ --nav-icon-opacity: 0.7; --nav-active-icon-color: var(--accent); --nav-label-color: #64748b; }