/* ============================================================= * theme.css — Light theme overrides * * Dark is the default (the base tokens in tokens.css). When the root * carries data-theme="light", these rules redefine the colour * tokens and patch the few hardcoded dark surfaces that don't read from * tokens. Loaded LAST so even equal-specificity rules win. * ============================================================= */ :root[data-theme="light"] { /* accent / accent-2 / accent-soft / on-accent stay the same — the orange brand reads well on both, and dark text on the orange CTA is unchanged. */ --bg: #F4F4F6; --surface: #FFFFFF; --surface-2: #F0F0F3; --surface-inverse: #0A0A0A; --text-primary: #18181B; --text-secondary: #52525B; --text-muted: #8A8A90; --text-inverse: #FFFFFF; --border: #E4E4E8; --border-subtle: #EDEDF0; /* danger / warning / success / info are legible on light too — unchanged. */ /* Bright amber text washes out on a light surface — use a darker amber so warning-note copy keeps enough contrast. Soft/border fills stay as-is. */ --warning-text: #B45309; } /* ---- Hardcoded dark surfaces (not token-driven) ---- */ /* #app paints a near-black gradient in dark mode (polish.css). */ [data-theme="light"] #app { background: var(--bg); } /* Tab bar is a fixed dark glass panel in dark mode (polish.css). */ [data-theme="light"] .tabbar { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 16px rgba(0, 0, 0, 0.12), 0 16px 36px rgba(0, 0, 0, 0.08); } /* Full-screen invoice backdrop uses a warm near-black radial in dark mode. */ [data-theme="light"] .invoice-screen { background: radial-gradient(125% 55% at 50% 0%, #FFEFE2 0%, var(--bg) 58%); } /* Skeleton shimmer is white stripes (invisible on light) — use dark stripes. Wallet/balance/hero skeletons sit on the orange card and keep their own (more specific, later-loaded) white shimmer. */ [data-theme="light"] .skeleton { background: linear-gradient( 90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0.05) 100% ); background-size: 200% 100%; }