/* * AltSal Design Token System * Single source of truth for all color values across every template. * Light / dark toggle controlled by [data-theme] on . * Defaults to dark (no attribute needed). */ /* ─── Dark theme (default) ─────────────────────────────────────────── */ :root { /* Surfaces */ --surface-0: #0b0e18; /* page background */ --surface-0-rgb: 11,14,24; --surface-1: #0f1117; /* slight raise — dashboard body */ --surface-2: #1a1d27; /* cards, panels, tab-body */ --surface-3: #222a3a; /* inputs, nested cards */ --surface-nav: #141823; /* global header / nav bar */ --surface-card:#111827; /* topbar stat cards */ /* Borders */ --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.04); --border-focus:rgba(59,130,246,0.5); --border-solid: #2e3347; /* solid border for dashboard panels */ --border-strong: #30384b; /* stronger border for popover/modal edges */ /* Text */ --text-1: #e4eaf5; --text-2: #8591a6; --text-3: #49526a; /* Accent */ --accent: #3b82f6; --accent-hover: #2563eb; --accent-dim: rgba(59,130,246,0.10); /* Semantic feedback */ --positive: #4ade80; --negative: #f87171; --warning: #d4c87a; --warning-bg: #1e2010; --warning-border: #3a4a61; /* Buttons */ --btn-muted-bg: #1e3a5f; --btn-muted-text: #7ab8ff; --btn-muted-border: #2e5a8f; --btn-muted-hover: #264a7a; --btn-danger-bg: #3d1515; --btn-danger-text: #f87171; --btn-danger-border:#7a2222; --btn-danger-hover: #4d1f1f; --btn-primary-bg: var(--accent); --btn-primary-hover:var(--accent-hover); /* Auth / form card */ --card: rgba(13,17,30,0.92); --input-bg: rgba(0,0,0,0.22); --err-bg: rgba(239,68,68,0.07); --err-border: rgba(239,68,68,0.28); --err-text: #f87171; /* Success / ok states */ --ok-bg: rgba(74,222,128,0.06); --ok-border: rgba(34,197,94,0.28); --ok-text: #4ade80; --ok-dim: #22c55e; /* Overlay (modal backdrop) */ --overlay: rgba(6,8,12,0.55); /* Scrollbar */ --scrollbar-thumb: rgba(255,255,255,0.12); --scrollbar-track: transparent; /* Market status */ --status-open-bg: #13301a; --status-open-border: #2a5a35; --status-closed-bg: rgba(120,40,40,0.18); --status-closed-border: rgba(200,60,60,0.22); --status-pre-bg: rgba(80,70,20,0.18); --status-pre-border: rgba(180,160,40,0.22); /* Portfolio pyramid */ --pyr-1: #274C77; --pyr-2: #2F5D8A; --pyr-3: #3A6E9C; --pyr-4: #477FAE; --pyr-5: #5590C0; --pyr-1-rgb: 39, 76, 119; --pyr-2-rgb: 47, 93, 138; --pyr-3-rgb: 58, 110, 156; --pyr-4-rgb: 71, 127, 174; --pyr-5-rgb: 85, 144, 192; --pyr-tier-text: #e6ecf3; --pyr-link-indicator: #7ba9d2; /* Plotly chart (applied via JS) */ --chart-bg: #0f1117; --chart-paper: #0f1117; --chart-text: #8591a6; --chart-grid: rgba(255,255,255,0.06); --chart-line: #3b82f6; --chart-fill: rgba(59,130,246,0.12); } /* ─── Light theme ───────────────────────────────────────────────────── */ [data-theme="light"] { /* Surfaces */ --surface-0: #f0f4fa; --surface-0-rgb: 240,244,250; --surface-1: #e8edf5; --surface-2: #ffffff; --surface-3: #f1f5fb; --surface-nav: #ffffff; --surface-card:#f8fafc; /* Borders */ --border: rgba(0,0,0,0.09); --border-2: rgba(0,0,0,0.04); --border-focus:rgba(37,99,235,0.45); --border-solid: rgba(0,0,0,0.12); --border-strong: rgba(0,0,0,0.16); /* Text */ --text-1: #0f172a; --text-2: #64748b; --text-3: #94a3b8; /* Accent */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-dim: rgba(37,99,235,0.09); /* Semantic feedback */ --positive: #16a34a; --negative: #dc2626; --warning: #92400e; --warning-bg: #fffbeb; --warning-border: #fde68a; /* Buttons */ --btn-muted-bg: #eaf2ff; --btn-muted-text: #1e40af; --btn-muted-border: #9fc5ff; --btn-muted-hover: #dbeafe; --btn-danger-bg: #fef2f2; --btn-danger-text: #dc2626; --btn-danger-border:#fecaca; --btn-danger-hover: #fee2e2; --btn-primary-bg: var(--accent); --btn-primary-hover:var(--accent-hover); /* Auth / form card */ --card: rgba(255,255,255,0.97); --input-bg: rgba(0,0,0,0.03); --err-bg: rgba(220,38,38,0.05); --err-border: rgba(220,38,38,0.22); --err-text: #dc2626; /* Success / ok states */ --ok-bg: rgba(22,163,74,0.06); --ok-border: rgba(22,163,74,0.28); --ok-text: #16a34a; --ok-dim: #15803d; /* Overlay */ --overlay: rgba(15,23,42,0.45); /* Scrollbar */ --scrollbar-thumb: rgba(0,0,0,0.15); --scrollbar-track: transparent; /* Market status */ --status-open-bg: #f0fdf4; --status-open-border: #86efac; --status-closed-bg: #fef2f2; --status-closed-border: #fecaca; --status-pre-bg: #fffbeb; --status-pre-border: #fde68a; /* Portfolio pyramid */ --pyr-1: #1e3a8a; --pyr-2: #1d4ed8; --pyr-3: #2563eb; --pyr-4: #3b82f6; --pyr-5: #60a5fa; --pyr-1-rgb: 30, 58, 138; --pyr-2-rgb: 29, 78, 216; --pyr-3-rgb: 37, 99, 235; --pyr-4-rgb: 59, 130, 246; --pyr-5-rgb: 96, 165, 250; --pyr-tier-text: #ffffff; --pyr-link-indicator: #93c5fd; /* Plotly chart (applied via JS) */ --chart-bg: #ffffff; --chart-paper: #f8fafc; --chart-text: #64748b; --chart-grid: rgba(0,0,0,0.06); --chart-line: #2563eb; --chart-fill: rgba(37,99,235,0.08); } /* ─── Compatibility aliases (public pages use old var names) ───────── */ /* Maps legacy --bg / --text / --bg-raised etc to the canonical tokens */ :root { --bg: var(--surface-0); --bg-raised: var(--surface-1); --bg-card: var(--surface-2); --text: var(--text-1); --accent-2: var(--accent-hover); } /* ─── Smooth transition on theme swap ──────────────────────────────── */ html { transition: background-color 0.18s ease, color 0.18s ease; } /* Apply transition to common elements but NOT to SVGs / images */ *, *::before, *::after { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } /* ─── Scrollbar ─────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } /* ─── Theme toggle button ───────────────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; font-size: 14px; flex-shrink: 0; line-height: 1; } .theme-toggle:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-focus); } /* Show correct icon per theme */ .theme-toggle .icon-dark { display: inline; } .theme-toggle .icon-light { display: none; } [data-theme="light"] .theme-toggle .icon-dark { display: none; } [data-theme="light"] .theme-toggle .icon-light { display: inline; } /* ─── Light-theme readability guardrails ───────────────────────────── Several templates intentionally use white text for the default dark theme. In light mode, keep only accent/button text white and remap structural text back to readable tokens. */ [data-theme="light"] .brand, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] .card-title, [data-theme="light"] .section h2, [data-theme="light"] .learn-header h1, [data-theme="light"] .learn-section h2, [data-theme="light"] .legal-card h1, [data-theme="light"] .guide-header h1, [data-theme="light"] .guide-section h2, [data-theme="light"] .public-chat-title, [data-theme="light"] .help-chat-title { color: var(--text-1) !important; } [data-theme="light"] .card strong, [data-theme="light"] .faq-item strong, [data-theme="light"] .learn-section h3, [data-theme="light"] .guide-section h3, [data-theme="light"] .fc-title, [data-theme="light"] .status-card h2, [data-theme="light"] .status-card h3 { color: var(--text-1) !important; } [data-theme="light"] .nav, [data-theme="light"] .page-nav { background: rgba(var(--surface-0-rgb), 0.78) !important; border-bottom-color: var(--border) !important; } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active, [data-theme="light"] .sidebar-nav a:hover, [data-theme="light"] .public-chat-close:hover, [data-theme="light"] .help-chat-close:hover { color: var(--text-1) !important; background: rgba(15, 23, 42, 0.05) !important; } [data-theme="light"] .pill, [data-theme="light"] .notice, [data-theme="light"] .sidebar-disclaimer, [data-theme="light"] .public-chat-input { background: rgba(15, 23, 42, 0.03) !important; } [data-theme="light"] .public-chat-msg.assistant, [data-theme="light"] .help-chat-msg.assistant { background: rgba(37, 99, 235, 0.07) !important; border-color: rgba(37, 99, 235, 0.18) !important; color: var(--text-1) !important; } [data-theme="light"] .public-chat-msg.user, [data-theme="light"] .help-chat-msg.user { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } [data-theme="light"] .card:hover, [data-theme="light"] .faq-item:hover { background: var(--surface-2) !important; } [data-theme="light"] [style*="color:#ffffff"], [data-theme="light"] [style*="color: #ffffff"], [data-theme="light"] [style*="color:#fff"], [data-theme="light"] [style*="color: #fff"], [data-theme="light"] [style*="color:#e0e0e0"], [data-theme="light"] [style*="color: #e0e0e0"] { color: var(--text-1) !important; } [data-theme="light"] [style*="color:#7a8099"], [data-theme="light"] [style*="color: #7a8099"], [data-theme="light"] [style*="color:#555a70"], [data-theme="light"] [style*="color: #555a70"] { color: var(--text-2) !important; } [data-theme="light"] .btn.primary, [data-theme="light"] .btn-primary, [data-theme="light"] .btn-link, [data-theme="light"] .public-chat-msg.user, [data-theme="light"] .public-chat-send, [data-theme="light"] .help-chat-msg.user, [data-theme="light"] .help-chat-send, [data-theme="light"] .dt-mode-btn.active { color: #fff !important; } /* ─── Basic mode shared nav ──────────────────────────────────────────── */ .basic-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border: 1px solid var(--border-solid); border-radius: 7px; padding: 7px 12px 7px 16px; margin-bottom: 4px; } .basic-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-solid); border-radius: 7px; padding: 5px 8px; margin-bottom: 6px; flex-wrap: wrap; } .basic-nav-main, .basic-nav-secondary { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .basic-nav-main { min-width: 0; } .basic-nav-secondary { margin-left: auto; padding-left: 10px; border-left: 1px solid var(--border-solid); } .basic-brand-link { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text-1); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; flex-shrink: 0; } .basic-brand-link:hover { opacity: 0.85; } .basic-brand-icon { color: var(--accent); flex-shrink: 0; } .basic-brand-mode { color: var(--text-2); font-size: 12px; font-weight: 400; letter-spacing: 0; } .basic-chip { border: 1px solid var(--border-solid); border-radius: 999px; background: var(--surface-1); color: var(--text-2); font-size: 11px; font-weight: 700; padding: 4px 9px; white-space: nowrap; } .basic-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .basic-nav-btn { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 700; padding: 5px 9px; text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit; } .basic-nav-btn:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--border-solid); } .basic-nav-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .basic-nav-btn.primary { border-color: var(--accent); background: var(--accent); color: #ffffff; } .basic-nav-btn.secondary { color: var(--text-2); background: var(--surface-1); border-color: var(--border-solid); } [data-theme="light"] .basic-nav-btn.primary { color: #ffffff; } @media (max-width: 860px) { .basic-topbar { align-items: flex-start; flex-wrap: wrap; } .basic-nav-row { align-items: flex-start; flex-wrap: wrap; } .basic-nav-secondary { width: 100%; margin-left: 0; padding-left: 0; padding-top: 5px; border-left: 0; border-top: 1px solid var(--border-solid); } } @media (max-width: 560px) { .basic-topbar { flex-direction: column; gap: 8px; } .basic-nav-actions { flex-wrap: wrap; } }