/* ================================================================ Signal Deck — Light Theme Overrides Applied only when is set. Dark theme (signal-deck-dark.css) is the default :root. ================================================================ */ [data-theme="light"] { /* --- Backgrounds --- */ --bg: #f4f6f8; /* Cool gray — no warm/beige tones */ --bg-deep: #eef1f4; --card: #ffffff; --card-elevated:#ffffff; --section-alt: #eef1f4; /* --- Borders --- */ --border: #dde1e7; --border-hover: #b0b8c4; /* --- Text --- */ --text: #1a1a1a; --text-bright: #0d0d0d; --text-muted: #5a6472; /* --- Accent: teal (primary UI accent in light mode) --- */ --accent: #00897B; --accent-dim: rgba(0, 137, 123, 0.10); /* --- Amber: warning/data signals only, not UI chrome --- */ --amber: #b87c10; --amber-dim: rgba(184, 124, 16, 0.09); } /* Light theme: hero border instead of gradient fade */ [data-theme="light"] .hero { border-bottom: 1px solid var(--border); } /* Light theme: ring glow adjusted */ [data-theme="light"] .ring-fill { filter: drop-shadow(0 0 4px rgba(1, 107, 112, 0.35)); } [data-theme="light"] .ring-bg { stroke: #C8C5BE; opacity: 0.6; } /* Light theme: bar tracks */ [data-theme="light"] .bar-track, [data-theme="light"] .mini-bar-track { background: rgba(0, 0, 0, 0.07); } /* Light theme: bar fills — no glow */ [data-theme="light"] .bar-fill { box-shadow: none; } /* Light theme: score pills */ [data-theme="light"] .score-critical { color: #B91C1C; background: #FEE2E2; border: 1px solid #FECACA; } [data-theme="light"] .score-high { color: #C2410C; background: #FFEDD5; border: 1px solid #FED7AA; } [data-theme="light"] .score-medium { color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A; } [data-theme="light"] .score-low { color: #166534; background: #DCFCE7; border: 1px solid #BBF7D0; } [data-theme="light"] .score-minimal { color: #1D4ED8; background: #DBEAFE; border: 1px solid #BFDBFE; } /* Light theme: construction track */ [data-theme="light"] .construction-track { border-top-color: var(--border); } [data-theme="light"] .track-step:not(:last-child)::after { background: var(--border); } [data-theme="light"] .track-dot { background: #D4D1CA; border-color: #B0ADA6; } [data-theme="light"] .track-label { color: #4A4843; } [data-theme="light"] .track-sublabel { color: #6B6862; } [data-theme="light"] .track-step:not(:last-child)::after, [data-theme="light"] .track-connector { background: #B0ADA6; } /* track-step.active dot + sublabel colors are applied via inline style (severity-coded per step) */ /* Light theme: section dividers */ [data-theme="light"] .report-section { border-top-color: var(--border); } /* Light theme: pill outline */ [data-theme="light"] .pill-outline { border-color: rgba(1, 107, 112, 0.4); } [data-theme="light"] .format-pill { border-color: rgba(1, 107, 112, 0.45); } /* Light theme: severity legend */ [data-theme="light"] .sev-item { color: #B91C1C; /* default; inline style overrides per item */ } /* Light theme: footer border */ [data-theme="light"] .footer { border-top-color: var(--border); } /* Light theme: theme toggle button */ [data-theme="light"] .theme-toggle { color: var(--text-muted); } /* ── Dimension info tooltips ─────────────────────────────── */ .dim-info-wrap { position: relative; display: inline-flex; align-items: center; } .dim-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; margin-left: 4px; border: 1px solid currentColor; opacity: 0.45; transition: opacity 0.15s; background: transparent; color: inherit; } .dim-info-btn:hover, .dim-info-btn:focus { opacity: 1; outline: none; } .dim-tooltip { visibility: hidden; opacity: 0; position: absolute; left: 0; top: calc(100% + 6px); z-index: 100; width: 280px; padding: 9px 11px; border-radius: 7px; font-size: 12px; line-height: 1.55; font-weight: 400; box-shadow: 0 4px 20px rgba(0,0,0,0.15); pointer-events: none; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; transition: opacity 0.12s ease; } .dim-info-btn:hover + .dim-tooltip, .dim-info-btn:focus + .dim-tooltip { visibility: visible; opacity: 1; } /* Light theme — body font weight 450 (antialiasing compensation on light bg) */ [data-theme="light"] body, [data-theme="light"] .card-body, [data-theme="light"] .eco-card p, [data-theme="light"] .dim-row-body, [data-theme="light"] .quote-block { font-weight: 450; -webkit-font-smoothing: antialiased; } /* Light theme — white card borders (cream bg → white cards need visible edge) */ [data-theme="light"] .card, [data-theme="light"] .eco-card, [data-theme="light"] .device-card, [data-theme="light"] .summary-card, [data-theme="light"] .dim-row { background: #FFFFFF; border-color: #D4D1CA; } /* Light theme — disclaimer and secondary text weight */ [data-theme="light"] .score-subtitle, [data-theme="light"] .disclaimer-text, [data-theme="light"] .score-description, [data-theme="light"] .score-disclaimer { color: #4A4843; font-weight: 450; } /* ── Canonical Wordmark — UNDER (dark) + SIGNAL (amber) ── */ .us-wordmark { font-family: var(--font-mono, 'Courier New', monospace); font-weight: 700; font-style: normal; font-size: inherit; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0; } .us-wordmark .wm-under { color: #1a1a1a; } .us-wordmark .wm-signal { color: #F5C140; } /* ===== TABS — light mode overrides ===== */ [data-theme="light"] .tab-btn { color: #374151; border-color: rgba(0,0,0,0.18); background: transparent; } [data-theme="light"] .tab-btn.active { color: #b45309; border-color: #b45309; background: rgba(180,83,9,0.07); } [data-theme="light"] .tab-btn:hover { color: #111827; border-color: rgba(0,0,0,0.35); background: rgba(0,0,0,0.04); }