/* Filsa — Theme scopes (light) * Dark is the default and lives in tokens/colors.css (:root). * This file adds the LIGHT scope. Nothing here changes dark mode. * * Apply light by scoping any subtree — or the whole document: * full light page (invoice, report, email) *
…
one light region inside the dark app * * Components read semantic tokens only, so they need no changes. * --gradient-brand is deliberately IDENTICAL in both themes: it is the brand asset. */ [data-theme="light"] { /* ============ Neutrals (light, warm paper — matches the wordmark off-white) ============ */ --n-0: #F7F6F2; /* app background */ --n-1: #FFFFFF; /* card */ --n-2: #FFFFFF; /* raised card */ --n-3: #F0EFEA; /* input / control */ --n-4: #E2E1DA; /* track */ --n-5: #B6B5AE; --n-6: #6B6B72; /* muted text — C8: was #7C7C84, which failed WCAG AA */ --n-7: #55555F; /* secondary text */ --n-8: #2C2C34; --n-9: #14141A; /* primary text */ /* ============ Surfaces ============ */ --bg-app: var(--n-0); --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #EFEEE9; --surface-inverse: #141417; /* rare DARK highlight chip/card on light */ /* ============ Text ============ */ --text-primary: #14141A; --text-secondary: #55555F; /* C8: was #7C7C84 (3.56–4.14:1, failing AA on every light ground). This is a literal, not var(--n-6) as in the dark scope, so --n-6 alone does not move it. */ --text-muted: #6B6B72; --text-faint: #A5A5AD; --text-inverse: #F3F2EE; /* text on the dark inverse surface */ --text-on-accent: #0B0B12; /* unchanged: the brand gradient stays bright */ /* ============ Borders ============ */ --border-subtle: rgba(16,16,28,0.09); --border-strong: rgba(16,16,28,0.16); --border-focus: var(--accent); /* ============ Accent — periwinkle deepened for 4.5:1 on white ============ */ --accent-strong: #4A58CC; --accent: #5A69E2; --accent-deep: #3D4ABA; --accent-fg: #4A58CC; --accent-hover: var(--accent-strong); --accent-tint: rgba(90,105,226,0.10); --accent-contrast: #FFFFFF; /* light-on-accent, inverse of dark mode */ /* ============ Finance semantics (dark-on-light) ============ */ /* C8: the previous values (#0E8A5E / #D24545 / #A9741A) cleared 4.5:1 on nothing but plain white, and chips set them ON their own tint, which is closer to the text than white is — 3.83 / 3.91 / 3.51. These are the deeper variants this file already carried under its legacy ramp names (--green-700, --coral-600, --amber-600), so the palette is unchanged in intent; the semantics now point at the values that pass. Tints follow their colour, or the pairing drifts apart again. */ --positive: #0B7A53; --negative: #B93A3A; --pending: #8C5F14; --info: #2A6FB5; --positive-tint: rgba(11,122,83,0.10); --negative-tint: rgba(185,58,58,0.10); --pending-tint: rgba(140,95,20,0.12); --info-tint: rgba(42,111,181,0.10); /* ============ Gradient ============ */ /* --gradient-brand is untouched — it is the brand asset and stays identical. */ --gradient-brand-soft: linear-gradient(217deg, rgba(124,234,138,0.22), rgba(119,178,238,0.22) 54%, rgba(185,131,253,0.22)); /* Text fill needs deeper stops to stay legible on paper */ --gradient-text: linear-gradient(110deg, #1F9A63 0%, #2F76D6 50%, #8348DE 100%); /* ============ Elevation — soft blue-grey, not black ============ */ --shadow-xs: 0 1px 2px rgba(20,20,40,0.05); --shadow-sm: 0 2px 8px rgba(20,20,40,0.07); --shadow-md: 0 8px 24px rgba(20,20,40,0.08); --shadow-lg: 0 18px 44px rgba(20,20,40,0.11); --shadow-xl: 0 32px 70px rgba(20,20,40,0.14); --shadow-accent: 0 10px 30px rgba(90,105,226,0.28); --shadow-glow: 0 12px 40px rgba(119,178,238,0.30); --ring: 0 0 0 3px rgba(90,105,226,0.26); /* ===== Legacy ramp names, remapped for light ===== */ --green-700: #0B7A53; --green-500: #0E8A5E; --green-300: #57C495; --green-100: rgba(14,138,94,0.10); --coral-600: #B93A3A; --coral-500: #D24545; --coral-100: rgba(210,69,69,0.10); --amber-600: #8C5F14; --amber-500: #A9741A; --amber-100: rgba(169,116,26,0.12); --blue-600: #235C97; --blue-500: #2A6FB5; --blue-100: rgba(42,111,181,0.10); --ink-900: #14141A; --ink-800: #2C2C34; --ink-700: #55555F; --ink-600: #7C7C84; --ink-500: #7C7C84; --ink-400: #A5A5AD; --ink-300: #E2E1DA; --paper-50: #FBFAF7; --paper-100: #F7F6F2; --paper-200: #F0EFEA; --paper-300: rgba(16,16,28,0.09); --paper-400: #E2E1DA; } /* Light surfaces need a lighter selection + link color */ [data-theme="light"] ::selection { background: rgba(90,105,226,0.20); color: #14141A; } [data-theme="light"] a { color: var(--accent-fg); } /* Optional: honour the OS preference instead of an explicit attribute. Off by default — Filsa is dark-first. Uncomment to opt in. @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { } } */