/* ============================================================ ROLODEX — Light theme overrides ("Frosted daylight") Load AFTER colors_and_type.css and glass.css. Apply by EITHER setting `data-theme="light"` on (works for static HTML) OR adding the `theme-light` class (preferred for React/JS-driven toggles — class mutations invalidate the cascade more reliably). Same recipe — glass + blooms + grain — but at daytime values. ============================================================ */ [data-theme="light"], .theme-light { color-scheme: light; /* ---------- Surface / background ---------- */ --bg-base: #f6f7f9; /* near-white, slightly cool */ --bg-elevated: #ffffff; /* top of vignette */ --bg-deep: #eef0f3; /* bottom of vignette */ /* Glass — frosted whiteness with a hairline */ --glass-fill: rgba(255, 255, 255, 0.62); --glass-fill-hover: rgba(255, 255, 255, 0.82); --glass-border: rgba(15, 23, 42, 0.08); --glass-border-hover:rgba(8, 145, 178, 0.40); --glass-blur: 20px; --glass-saturate: 160%; --surf-1: rgba(15, 23, 42, 0.03); --surf-2: rgba(15, 23, 42, 0.05); --surf-3: rgba(15, 23, 42, 0.08); /* ---------- Foreground — black at six opacity steps ---------- */ --fg-1: rgba(15, 23, 42, 0.95); /* primary */ --fg-2: rgba(15, 23, 42, 0.85); --fg-3: rgba(15, 23, 42, 0.65); --fg-4: rgba(15, 23, 42, 0.55); --fg-5: rgba(15, 23, 42, 0.45); --fg-6: rgba(15, 23, 42, 0.30); /* ---------- Accent — darkened cyan for AA contrast on white ---------- */ --accent: #0891B2; /* cyan-600 — passes AA on #fff */ --accent-soft: rgba(8, 145, 178, 0.10); --accent-glow: rgba(8, 145, 178, 0.30); --accent-text: #0E7490; /* Background blooms — lower opacity; light bases can't carry as much color */ --bloom-violet: rgba(124, 77, 255, 0.16); --bloom-cyan: rgba(14, 165, 233, 0.18); --bloom-indigo: rgba(67, 56, 202, 0.12); /* ---------- Status pills — darker text on lighter tints ---------- */ --status-prospect-bg: rgba(15, 23, 42, 0.04); --status-prospect-fg: rgba(15, 23, 42, 0.65); --status-prospect-dot: rgba(15, 23, 42, 0.45); --status-qualified-bg: rgba(99, 102, 241, 0.10); --status-qualified-fg: #4338CA; --status-qualified-dot: #6366F1; --status-proposal-bg: rgba(245, 158, 11, 0.14); --status-proposal-fg: #B45309; --status-proposal-dot: #F59E0B; --status-negotiation-bg: rgba(14, 165, 233, 0.12); --status-negotiation-fg: #0369A1; --status-negotiation-dot:#0EA5E9; --status-won-bg: rgba(16, 185, 129, 0.12); --status-won-fg: #047857; --status-won-dot: #10B981; --status-lost-bg: rgba(244, 63, 94, 0.10); --status-lost-fg: #BE123C; --status-lost-dot: #F43F5E; --delta-up: #047857; /* emerald-700 */ --delta-down: #BE123C; /* rose-700 */ /* ---------- Borders / hairlines ---------- */ --hairline: rgba(15, 23, 42, 0.06); --hairline-strong: rgba(15, 23, 42, 0.10); --hairline-accent: rgba(8, 145, 178, 0.40); /* ---------- Elevation — shadows ARE useful on white. ---------- */ --shadow-halo-accent: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 60px -24px rgba(8, 145, 178, 0.30), 0 0 0 1px rgba(8, 145, 178, 0.12); --shadow-glow-cyan: 0 0 14px rgba(8, 145, 178, 0.35); --shadow-glow-soft: 0 0 8px rgba(8, 145, 178, 0.50); --shadow-pop: 0 12px 32px -10px rgba(15, 23, 42, 0.15); --shadow-modal: 0 24px 60px -20px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.05); } /* ----- baseline body color when light theme is active ----- */ [data-theme="light"], .theme-light, [data-theme="light"] body, .theme-light body { background-color: var(--bg-base); color: var(--fg-2); } /* ----- ::selection ----- */ [data-theme="light"] ::selection, .theme-light ::selection { background: rgba(8, 145, 178, 0.20); color: var(--fg-1); } /* ============================================================ Glass + chrome overrides ============================================================ */ /* Cards get a small resting shadow in light mode so they sit above the page. */ [data-theme="light"] .glass, .theme-light .glass { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -16px rgba(15, 23, 42, 0.10); } /* Meniscus stays white but stronger — it's the actual highlight, not a stroke. */ [data-theme="light"] .glass::before, .theme-light .glass::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.20) 30%, transparent 60%); } [data-theme="light"] .glass-hover:hover, .theme-light .glass-hover:hover { background: var(--glass-fill-hover); border-color: var(--glass-border-hover); box-shadow: var(--shadow-halo-accent); transform: translateY(-2px); } /* Edge glint — switch to the cyan-600 accent. */ [data-theme="light"] .edge-glint::after, .theme-light .edge-glint::after { background: linear-gradient(90deg, transparent, rgba(8, 145, 178, 0.55), transparent); } /* ============================================================ Background — light vignette ============================================================ */ [data-theme="light"] .bg-fx::before, .theme-light .bg-fx::before { background: radial-gradient(ellipse at top, var(--bg-elevated) 0%, var(--bg-base) 55%, var(--bg-deep) 100%); } [data-theme="light"] .bg-fx::after, .theme-light .bg-fx::after { /* very gentle vignette — light pages prefer almost none */ background: radial-gradient(ellipse at center, transparent 50%, rgba(15, 23, 42, 0.06) 100%); } /* Blooms — narrow them and lower the blur so they read as soft color washes rather than grey haze on a white page. */ [data-theme="light"] .bloom, .theme-light .bloom { filter: blur(60px); } /* Grain — switch to multiply so dark specks land on the white page. */ [data-theme="light"] .noise-overlay, .theme-light .noise-overlay { opacity: 0.04; mix-blend-mode: multiply; } /* ============================================================ Type — hero gradient flips direction (dark → muted-dark) ============================================================ */ [data-theme="light"] .text-gradient, [data-theme="light"] .text-hero, [data-theme="light"] h1.hero, .theme-light .text-gradient, .theme-light .text-hero, .theme-light h1.hero { background: linear-gradient(180deg, #0F172A 0%, rgba(15, 23, 42, 0.70) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="light"] .text-kpi--accent, .theme-light .text-kpi--accent { color: var(--accent); text-shadow: 0 0 14px rgba(8, 145, 178, 0.30); } /* kbd — light recipe */ [data-theme="light"] kbd, [data-theme="light"] .kbd, .theme-light kbd, .theme-light .kbd { background: rgba(15, 23, 42, 0.05); border-color: var(--glass-border); color: var(--fg-3); } /* Scrollbar — light */ [data-theme="light"] .rolodex-scroll::-webkit-scrollbar-thumb, .theme-light .rolodex-scroll::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.10); background-clip: padding-box; } [data-theme="light"] .rolodex-scroll::-webkit-scrollbar-thumb:hover, .theme-light .rolodex-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.20); background-clip: padding-box; } /* ============================================================ UI-kit-specific direct overrides. Background: Chrome has an edge-case cascade-invalidation bug where `color: var(--xxx)` on deeply nested React-rendered