/* Barbato Labs — Light Theme Overlay v0.4 * * Enterprise-neutral palette. Dark stays the brand default (:root). * This file overrides only the surface/text/border/shadow/status tokens * for light mode — brand palette (--bl-brand-*) is intentionally unchanged. * * Specificity: :is(html)[data-theme="light"] = (0,1,1) which beats :root (0,1,0). * No !important needed. Pattern adopted from secjobs IMP-002 (proven in production). * * Usage: * @import url('/brand/tokens/index.css'); ← already imports this file * document.documentElement.setAttribute('data-theme', 'light'); * * Auto-detect (fires only when consumer has not set data-theme explicitly): * @media (prefers-color-scheme: light) — see bottom of file. */ /* ── Light Theme Overlay ─────────────────────────────────────────────────── */ :is(html)[data-theme="light"] { /* Surfaces — enterprise-neutral cool scale (Linear / Vercel / Stripe register) */ --bl-bg-primary: #fafafb; /* page background */ --bl-bg-elevated: #ffffff; /* card / surface */ --bl-bg-overlay: #f4f4f6; /* modal / dropdown */ --bl-bg-vitrine: #f5f3ff; /* subtle lavender — vitrine atmospheric light */ /* Text — near-black ink + slate cool secondaries */ --bl-text-primary: #0a0a0a; --bl-text-secondary: #525866; --bl-text-muted: #868c98; /* Borders — neutral, not brand-tinted (brand-tinted borders leak purple into every divider → consumer SaaS feel) */ --bl-border-subtle: rgba(10, 10, 10, 0.06); --bl-border-strong: rgba(10, 10, 10, 0.12); /* Shadows — real depth in light; dark keeps none (set in colors.css :root) */ --bl-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05); --bl-shadow-md: 0 4px 6px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04); --bl-shadow-lg: 0 10px 15px rgba(10, 10, 10, 0.08), 0 4px 6px rgba(10, 10, 10, 0.04); /* Semantic status — solid bg tints + accessible fg for body text on white --bl-status-ok/warn/fail/info (the base hex) unchanged — used for icons/badges. Pairs below are for alert boxes, inline text, status labels. */ --bl-status-ok-bg: #ecfdf5; --bl-status-ok-fg: #065f46; /* green-900 — 7.1:1 on #ecfdf5, 9.8:1 on #fff */ --bl-status-warn-bg: #fffbeb; --bl-status-warn-fg: #92400e; /* amber-900 — 7.5:1 on #fffbeb */ --bl-status-fail-bg: #fef2f2; --bl-status-fail-fg: #991b1b; /* red-900 — 7.2:1 on #fef2f2 */ --bl-status-info-bg: #eff6ff; --bl-status-info-fg: #1d4ed8; /* blue-700 — 4.7:1 on #eff6ff */ /* Link — brand primary is #6B10EB; contrast on white = 5.9:1 (AA pass). Secondary (#b94aff) is only 3.1:1 on white — FAILS AA for normal text. Demote secondary to hover only in light mode. */ --bl-link: var(--bl-brand-primary); --bl-link-hover: #5A0DC8; } /* ── Auto-detect ─────────────────────────────────────────────────────────── */ /* Fires ONLY when consumer has not set data-theme explicitly on . Any explicit [data-theme="dark"] or [data-theme="light"] wins — no conflict. */ @media (prefers-color-scheme: light) { :is(html):not([data-theme]) { --bl-bg-primary: #fafafb; --bl-bg-elevated: #ffffff; --bl-bg-overlay: #f4f4f6; --bl-bg-vitrine: #f5f3ff; /* subtle lavender — vitrine atmospheric light */ --bl-text-primary: #0a0a0a; --bl-text-secondary: #525866; --bl-text-muted: #868c98; --bl-border-subtle: rgba(10, 10, 10, 0.06); --bl-border-strong: rgba(10, 10, 10, 0.12); --bl-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05); --bl-shadow-md: 0 4px 6px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04); --bl-shadow-lg: 0 10px 15px rgba(10, 10, 10, 0.08), 0 4px 6px rgba(10, 10, 10, 0.04); --bl-status-ok-bg: #ecfdf5; --bl-status-ok-fg: #065f46; --bl-status-warn-bg: #fffbeb; --bl-status-warn-fg: #92400e; --bl-status-fail-bg: #fef2f2; --bl-status-fail-fg: #991b1b; --bl-status-info-bg: #eff6ff; --bl-status-info-fg: #1d4ed8; --bl-link: var(--bl-brand-primary); --bl-link-hover: #5A0DC8; } }