/* ==================================================================== VCM — Light theme. Activated by . Loads AFTER glass.css so [data-mode="light"] selectors win. Reassigns neutrals/text/glass; keeps VCM blue accent; darkens status hues for AA contrast on white; re-tunes liquid glass for light. ==================================================================== */ [data-mode="light"]{ /* canvas & elevation */ --canvas:#eaeef6; --surface-1:#ffffff; --surface-2:#f6f8fc; --surface-3:#eef2f8; --surface-4:#e3e9f2; --glass-1:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.66); --glass-3:rgba(255,255,255,.78); /* hairline borders (dark, low alpha) */ --border:rgba(15,23,42,.10); --border-strong:rgba(15,23,42,.17); --border-inset:rgba(255,255,255,.85); /* text */ --fg:#101526; --fg-muted:#49506842; /* placeholder, overwritten next line */ --fg-muted:#4a5168; --fg-subtle:#5d6478; --fg-disabled:#a9b0c1; /* accent stays VCM blue; deepen press for white bg */ --accent:#1d52c0; --accent-hover:#2a61d8; --accent-press:#234fc0; --accent-fg:#ffffff; --accent-ghost:rgba(47,107,237,.12); /* status — darkened to meet WCAG AA (≥4.5:1) on pale ghost/canvas backgrounds */ --ok:#0a7d55; --ok-ghost:rgba(15,157,110,.13); --warn:#8a5900; --warn-ghost:rgba(176,116,16,.14); --danger:#d23f36; --danger-ghost:rgba(210,63,54,.12); --info:#175fa0; --info-ghost:rgba(31,127,206,.12); --pending:#7a49ce; --pending-ghost:rgba(122,73,206,.13); --gold:#7a5500; --gold-ghost:rgba(169,120,28,.14); /* liquid-glass vars re-tuned for light */ --lg-spec:rgba(255,255,255,.95); --lg-edge:rgba(15,23,42,.10); --lg-sheenA:rgba(255,255,255,.7); --lg-sheenB:rgba(255,255,255,.25); } /* Softer, lighter shadows on glass surfaces (override glass.css dark drops) */ [data-mode="light"] .glass, [data-mode="light"] .card, [data-mode="light"] .mcard, [data-mode="light"] .modal, [data-mode="light"] .sheet, [data-mode="light"] .notif, [data-mode="light"] .cmdk .modal{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 22px rgba(15,23,42,.10) !important; } [data-mode="light"] .card.tight{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 12px rgba(15,23,42,.08) !important; } [data-mode="light"] .sidebar, [data-mode="light"] .topbar{ box-shadow: inset 0 -1px 0 var(--border), 0 6px 20px rgba(15,23,42,.07) !important; } /* card hover — gentle lift, not a dark glow */ [data-mode="light"] .card:hover, [data-mode="light"] .mcard:hover{ box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(15,23,42,.14) !important; } /* Icon tiles — light frosted blue squircle */ [data-mode="light"] .ai, [data-mode="light"] .nic, [data-mode="light"] .iconbtn, [data-mode="light"] .stat .ictile, [data-mode="light"] .lgtile{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(15,23,42,.10) !important; border:1px solid rgba(47,107,237,.20) !important; } [data-mode="light"] .iconbtn{ background:linear-gradient(176deg, rgba(255,255,255,.9), rgba(255,255,255,.55) 60%), var(--surface-1) !important; color:var(--fg-muted); } [data-mode="light"] .iconbtn:hover{ background:var(--surface-3) !important; color:var(--fg); } /* Phone frame — light slab */ [data-mode="light"] .phone{ box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.06) !important; } /* Tab bar / nav active stay accent-tinted (already var-driven) */ [data-mode="light"] .navItem.active{ box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(47,107,237,.14); } /* Buttons: primary keeps blue gradient; soften its glow for light */ [data-mode="light"] .btn{ box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(47,107,237,.28) !important; } [data-mode="light"] .btn.secondary{ background:linear-gradient(176deg,#fff,var(--surface-2)) !important; border-color:var(--border-strong) !important; box-shadow:0 1px 2px rgba(15,23,42,.06) !important; } [data-mode="light"] .btn.ghost{ background:transparent !important; box-shadow:none !important; } /* calendar / cells read better with a touch more contrast on light */ [data-mode="light"] .cell{ background:var(--surface-1); border-color:var(--border); } /* scrollbars */ [data-mode="light"] *::-webkit-scrollbar-thumb{ background:#c7cedb; } /* live-data states tuned for light: deeper skeleton base + readable shimmer */ [data-mode="light"] .skel{ background:#dde3ee; } [data-mode="light"] .skel::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); } [data-mode="light"] .spinner{ border-color:var(--border-strong); border-top-color:var(--accent); }