/* ============================================================ LUKI — Light theme ("Modo claro") Opt-in override scope. Set data-theme="light" on (or any container) and every --mic-* surface/text/border/shadow flips to the light palette. Same token names, so all components adapt with zero code changes. Key decisions - The brand lives in the logo and the primary action (--mic-brand #E8542E); everything else works in teal (#0E7470) + neutrals. - Teal is dark on light, so ink ON a teal fill flips to white. - Shadows become soft blue-black elevations (never the heavy 0.30+ black used on the dark canvas). ============================================================ */ [data-theme="light"] { /* ---- Surfaces (light neutrals, white cards) ---- */ --mic-bg-main: #f0f2f2; /* general app background */ --mic-bg-sidebar: #ffffff; /* left rail */ --mic-bg-card: #ffffff; /* content card — BRAND surface #FFFFFF */ --mic-bg-card-soft: #f0f2f2; /* sub-surface: inputs, inner tiles */ --mic-bg-active: #e6f2f1; /* active nav item — teal tint */ --mic-bg-hover: #eef1f1; /* row / item hover fill */ --mic-bg-ghost-hover: #eaeeee; /* ghost & secondary button hover */ --mic-bg-secondary: #ffffff; /* secondary button base (white + border) */ --mic-bg-elevated: #ffffff; /* elevated panels: nav flyouts, modal rails */ /* ---- Teal — "primario" #0E7470, deepened for contrast on white ---- */ --mic-accent: #0e7470; /* accent · active · links · metrics */ --mic-accent-strong: #0a5f5c; /* saturated: progress gradient */ --mic-accent-hover: #0c6663; /* accent hover — slightly deeper on light */ --mic-accent-ink: #ffffff; /* text/icon ON a teal fill (teal is dark here) */ --mic-accent-dim: #3c8f8a; /* muted teal (readable on white) */ /* Translucent teal washes — over white */ --mic-accent-wash: rgba(14, 116, 112, 0.08); --mic-accent-wash-2: rgba(14, 116, 112, 0.14); --mic-accent-border: rgba(14, 116, 112, 0.35); --mic-accent-halo: rgba(14, 116, 112, 0.35); /* focus ring */ --mic-accent-soft-bg: rgba(14, 116, 112, 0.10); --mic-accent-soft-border: rgba(14, 116, 112, 0.35); /* ---- Fox orange — BRAND #E8542E, logo + primary action ONLY ---- */ --mic-brand: #e8542e; /* primary CTA fill · logo accent */ --mic-brand-strong: #d24b28; /* pressed / saturated brand */ --mic-brand-hover: #d24b28; /* primary button hover — deeper on light */ --mic-brand-ink: #ffffff; /* text/icon ON an orange fill */ --mic-brand-wash: rgba(232, 84, 46, 0.10); --mic-brand-border: rgba(232, 84, 46, 0.38); /* ---- Text (BRAND ink #1C2626 → muted neutrals) ---- */ --mic-text-main: #1c2626; --mic-text-muted: #525e5e; --mic-text-faint: #7b8787; --mic-text-dim: #a7b2b2; /* ---- Borders (light hairlines) ---- */ --mic-border-soft: #e1e6e6; --mic-border-faint: #eceff0; --mic-border-dashed: #c2cbcb; /* ---- Semantic state (semáforo) — deepened for contrast on white ---- */ --mic-ok: #2e8b47; --mic-ok-text: #23784f; --mic-warning: #a97614; --mic-warning-strong: #9c6d00; --mic-warning-text: #8a6400; /* ochre text readable on white */ --mic-danger: #b03a2e; --mic-danger-btn: #b03a2e; --mic-danger-btn-hover: #99322a; --mic-error: #c2493d; --mic-error-strong: #a93b30; /* ---- Info / links ---- */ --mic-info: #2b7fd6; --mic-info-soft: #2b7fd6; /* ---- Shadows — soft blue-black elevations, not the dark canvas's heavy black ---- */ --mic-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06); --mic-shadow-modal: 0 20px 48px rgba(16, 24, 40, 0.18); --mic-shadow-menu: 0 10px 30px rgba(16, 24, 40, 0.12); --mic-shadow-hover: 0 4px 12px rgba(16, 24, 40, 0.12); --mic-shadow-flyout: 0 6px 16px rgba(16, 24, 40, 0.12); /* Focus ring — teal halo */ --mic-ring-focus: 0 0 0 2px rgba(14, 116, 112, 0.35); /* ---- Scrollbar ---- */ --mic-scroll-thumb: #cbd2d2; --mic-scroll-thumb-hover: #b5bdbd; }