/* * uniek-light.css — light-mode overrides for the uNiek Design System * -------------------------------------------------------------------- * Load AFTER uniek.css. Activates when is set * (the a11y-bar 🌙/☀️ button does this via uniek-core.js). * * Only surfaces/text/borders flip — brand-primary/secondary keep their * hue so a customer's brand still shines through in both modes. */ html[data-theme="light"] { /* Surfaces */ --brand-bg: #F8F7F4; /* warm off-white */ --brand-bg-elevated: #FFFFFF; --brand-surface: #FFFFFF; --brand-surface-alt: #F0EDE8; --brand-border: #E5E1D9; --brand-border-strong:#C8C3B7; /* Text */ --brand-text: #1C1C2E; --brand-text-strong: #000000; --brand-text-muted: #5C5C7A; --brand-text-faint: #8C8CA8; --brand-text-on-primary: #1C1C2E; /* Soft chip backgrounds (slightly stronger in light mode for contrast) */ --brand-primary-soft: rgba(170, 202, 56, 0.22); --brand-secondary-soft: rgba(248, 172, 46, 0.22); --brand-danger-soft: rgba(224, 85, 85, 0.20); --brand-success-soft: rgba(78, 205, 196, 0.22); --brand-warning-soft: rgba(248, 172, 46, 0.22); --brand-info-soft: rgba(125, 211, 240, 0.25); /* Shadows softer in light mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.14); } /* Code chips need a touch more separation on light background */ html[data-theme="light"] code { background: var(--brand-primary-soft); }