/* ============================================================ Kontrak Theme System — CSS Variables for Dark + Light modes Loaded via BEFORE app.css Theme is applied via [data-theme="dark"|"light"] on ============================================================ */ /* ---- DARK (default) ---- */ :root, :root[data-theme="dark"] { /* Surfaces */ --bg-app: #0a0a0a; --bg-1: #111; --bg-2: #1a1a1a; --bg-3: #222; --bg-card: #111; --bg-elevated: #1a1a1a; --bg-input: #1a1a1a; --bg-input-page: #000; --bg-hover: #161616; --bg-overlay: rgba(0, 0, 0, 0.7); /* Borders */ --border-1: #1a1a1a; --border-2: #222; --border-3: #333; --border-strong: #444; --border-focus: #fff; /* Text */ --text-1: #fff; --text-2: #ccc; --text-3: #999; --text-4: #666; --text-disabled: #444; --text-on-accent: #000; /* Sidebar */ --sidebar-bg: #111; --sidebar-border: #222; --sidebar-text: #999; --sidebar-text-active: #fff; --sidebar-bg-active: #1a1a1a; --sidebar-user-text: #666; /* Buttons */ --btn-primary-bg: #fff; --btn-primary-fg: #000; --btn-secondary-bg: #1a1a1a; --btn-secondary-fg: #fff; --btn-secondary-border: #333; --btn-danger-bg: #3a1a1a; --btn-danger-fg: #ff6b6b; --btn-danger-border: #5a2a2a; /* Badges */ --badge-green-bg: #1a3a1a; --badge-green-fg: #4caf50; --badge-yellow-bg: #3a3a1a; --badge-yellow-fg: #ffc107; --badge-blue-bg: #1a2a3a; --badge-blue-fg: #64b5f6; --badge-gray-bg: #1a1a1a; --badge-gray-fg: #999; --badge-red-bg: #3a1a1a; --badge-red-fg: #ef5350; /* Toasts */ --toast-success-bg: #064e3b; --toast-success-border: #10b981; --toast-error-bg: #7f1d1d; --toast-error-border: #f87171; --toast-info-bg: #1e3a5f; --toast-info-border: #60a5fa; /* Footer */ --footer-text: #444; --footer-link: #555; /* Brand & accents — UNCHANGED across themes */ --accent-green: #10b981; --accent-green-soft: rgba(16, 185, 129, 0.13); /* Primary CTA — brand green in both modes (use this for primary buttons) */ --cta-bg: #10b981; --cta-fg: #000; --cta-bg-hover: #059669; /* Danger zone tinted backgrounds (red wash, theme-aware) */ --danger-zone-bg: #1a0a0a; --danger-zone-text: #fca5a5; --accent-indigo: #6366f1; --accent-purple: #a78bfa; --accent-red: #ef4444; --accent-amber: #f59e0b; --accent-blue: #3b82f6; --accent-cyan: #06b6d4; --accent-violet: #8b5cf6; /* Logo */ --logo-color: #fff; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } /* ---- LIGHT ---- */ :root[data-theme="light"] { /* Surfaces */ --bg-app: #f9fafb; --bg-1: #ffffff; --bg-2: #f3f4f6; --bg-3: #e5e7eb; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-input-page: #f9fafb; --bg-hover: #f3f4f6; --bg-overlay: rgba(17, 24, 39, 0.5); /* Borders */ --border-1: #e5e7eb; --border-2: #d1d5db; --border-3: #9ca3af; --border-strong: #6b7280; --border-focus: #10b981; /* Text */ --text-1: #111827; --text-2: #374151; --text-3: #6b7280; --text-4: #9ca3af; --text-disabled: #d1d5db; --text-on-accent: #ffffff; /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-border: #e5e7eb; --sidebar-text: #6b7280; --sidebar-text-active: #111827; --sidebar-bg-active: #f3f4f6; --sidebar-user-text: #9ca3af; /* Buttons */ --btn-primary-bg: #111827; --btn-primary-fg: #ffffff; --btn-secondary-bg: #ffffff; --btn-secondary-fg: #111827; --btn-secondary-border: #d1d5db; --btn-danger-bg: #fee2e2; --btn-danger-fg: #b91c1c; --btn-danger-border: #fca5a5; /* Badges */ --badge-green-bg: #d1fae5; --badge-green-fg: #047857; --badge-yellow-bg: #fef3c7; --badge-yellow-fg: #b45309; --badge-blue-bg: #dbeafe; --badge-blue-fg: #1e40af; --badge-gray-bg: #f3f4f6; --badge-gray-fg: #4b5563; --badge-red-bg: #fee2e2; --badge-red-fg: #b91c1c; /* Toasts */ --toast-success-bg: #d1fae5; --toast-success-border: #10b981; --toast-error-bg: #fee2e2; --toast-error-border: #ef4444; --toast-info-bg: #dbeafe; --toast-info-border: #3b82f6; /* Footer */ --footer-text: #9ca3af; --footer-link: #6b7280; /* Logo */ --logo-color: #10b981; /* Shadows (softer in light mode) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Override toast text on light backgrounds */ --toast-text: #111827; /* Danger zone in light mode — light pink wash, dark red text */ --danger-zone-bg: #fef2f2; --danger-zone-text: #b91c1c; } [data-theme="light"] .toast { color: var(--toast-text, #111827); } /* ---- Force-dark opt-out for printable / customer-facing pages ---- */ /* Pages that should ALWAYS render dark regardless of theme toggle should add `data-force-theme="dark"` to . This ensures PDFs, proposals, public-facing customer pages keep their fixed branding. */ body[data-force-theme="dark"] { background: #0a0a0a; color: #fff; } /* ---- Floating theme toggle button (injected by js/theme.js) ---- */ .kontrak-theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 950; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-3); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: all 0.15s; box-shadow: var(--shadow-sm); } .kontrak-theme-toggle:hover { border-color: var(--accent-green); color: var(--accent-green); transform: translateY(-1px); box-shadow: var(--shadow-md); } .kontrak-theme-toggle:active { transform: translateY(0); } /* On mobile, hide floating toggle to avoid overlap with mobile nav toggle */ @media (max-width: 768px) { .kontrak-theme-toggle { top: auto; bottom: 80px; right: 14px; } } /* Hide toggle entirely on force-dark pages */ body[data-force-theme="dark"] .kontrak-theme-toggle { display: none; } /* ---- Smooth transitions when toggling ---- */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; transition-delay: 0 !important; }