body { height: 100%; background-color: var(--bg-primary); color: var(--text-primary); } /* AI generated past this point (give me a break, I am colourblind)*/ /* Theme system — CSS Custom Properties ------------------------------------ Usage: set data-theme on or , e.g. Core 6 variables: --bg-primary / --bg-secondary / --bg-tertiary --text-primary / --text-secondary / --disabled-text Structural extras: --accent / --accent-hover -> buttons, links, active states, focus rings --border -> dividers, input borders, card outlines --shadow -> box-shadow color, tuned per theme Gradient / artistic extras: --accent-secondary -> second hue paired with --accent for two-tone gradients --text-on-accent -> the text color (black or white) to use ON TOP of --accent / --accent-secondary / --gradient-brand, pre-checked so it always meets WCAG AA (4.5:1+) --gradient-brand -> vivid two-tone gradient for buttons, CTAs, badges, hero sections, gradient text --gradient-surface -> subtle same-family gradient for cards/panels, adds depth without hurting text contrast --gradient-glow -> soft, semi-transparent radial gradient for decorative blurred "aurora" shapes behind content Confirm / reject buttons (new): --confirm / --confirm-hover / --text-on-confirm -> "yes", "save", "accept" actions --reject / --reject-hover / --text-on-reject -> "no", "delete", "decline" actions These are tinted per-theme (not generic traffic-light green/red) so they sit comfortably alongside each palette, and are separately verified to meet: - 3:1 contrast against --bg-primary (so the button is visibly a button) - 4.5:1 contrast against --text-on-confirm / --text-on-reject (so the label reads) Interesting result of the color math: --confirm reliably pairs with BLACK text and --reject reliably pairs with WHITE text across every theme here — green hits a given perceived brightness at a much lower "lightness" than red does, so at matched saturation the greens end up light enough for dark text and the reds end up dark enough for light text. Convenient, and it makes the two actions easy to visually tell apart at a glance even before reading the label. Notes: - text-tertiary is intentionally the lowest-contrast text color. Use it for placeholders, timestamps, disabled labels, helper text — not for content the user needs to read. - All primary/secondary text-on-background pairings meet or exceed WCAG AA (4.5:1) across all three background shades in every theme. - text-on-accent is separately verified against BOTH --accent and --accent-secondary, so it's safe to use across the whole gradient, not just at one end of it. - For the two High Contrast themes, --gradient-brand and --gradient-surface are intentionally monochrome (same hue, different shade) rather than colorful two-tone, and --gradient-glow is very low-opacity. Accessibility users relying on these themes benefit from restraint over decoration — consider skipping --gradient-glow entirely for these two if you support prefers-reduced-transparency / prefers-contrast media queries. */ /* ============ LIGHT THEMES ============ */ .theme-root { --bg-primary: #FFFFFF; --bg-secondary: #F2F2F2; --bg-tertiary: #E4E4E4; --text-primary: #1A1A1A; --text-secondary: #5C5C5C; --text-tertiary: #8A8A8A; --accent: #3D63C7; --accent-secondary: #3D5FCC; --accent-hover: #2E4EA0; --text-on-accent: #FFFFFF; --border: #D0D0D0; --shadow: rgba(0, 0, 0, 0.08); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(61, 99, 199, 0.25) 0%, rgba(61, 95, 204, 0) 70%); --confirm: #2F9E58; --confirm-hover: #2A8850; --text-on-confirm: #000000; --reject: #C93B37; --reject-hover: #A82F2C; --text-on-reject: #FFFFFF; } .theme-root[theme="midnight-ink"]{ --bg-primary: #0B0E1A; --bg-secondary: #131828; --bg-tertiary: #1C2338; --text-primary: #E7E9F2; --text-secondary: #A7ADC4; --text-tertiary: #6F7590; --accent: #6C7FFF; --accent-secondary: #8F6CFF; --accent-hover: #5468E0; --text-on-accent: #FFFFFF; --border: #262D45; --shadow: rgba(0, 0, 0, 0.45); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(108, 127, 255, 0.25) 0%, rgba(143, 108, 255, 0) 70%); --confirm: #3DDC97; --confirm-hover: #2FBE81; --text-on-confirm: #06231A; --reject: #FF6B6B; --reject-hover: #E14F4F; --text-on-reject: #2E0808; } .theme-root[theme="charcoal-ember"]{ --bg-primary: #181613; --bg-secondary: #221E19; --bg-tertiary: #2D2822; --text-primary: #F2EDE6; --text-secondary: #B8ADA0; --text-tertiary: #857A6D; --accent: #E8873A; --accent-secondary: #D65D3F; --accent-hover: #C46F2C; --text-on-accent: #1A1108; --border: #3A332B; --shadow: rgba(0, 0, 0, 0.5); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(232, 135, 58, 0.22) 0%, rgba(214, 93, 63, 0) 70%); --confirm: #7FB86A; --confirm-hover: #6BA357; --text-on-confirm: #10230A; --reject: #D9534F; --reject-hover: #C24541; --text-on-reject: #FFFFFF; } .theme-root[theme="forest-night"]{ --bg-primary: #0B120F; --bg-secondary: #121B16; --bg-tertiary: #1A261F; --text-primary: #E5EDE8; --text-secondary: #9DB0A5; --text-tertiary: #66786D; --accent: #3FBF83; --accent-secondary: #2FA5A0; --accent-hover: #33A56E; --text-on-accent: #06170F; --border: #253830; --shadow: rgba(0, 0, 0, 0.45); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(63, 191, 131, 0.22) 0%, rgba(47, 165, 160, 0) 70%); --confirm: #6FCF7A; --confirm-hover: #58B865; --text-on-confirm: #08210D; --reject: #E0685A; --reject-hover: #C6564A; --text-on-reject: #2A0805; } .theme-root[theme="plum-velvet"]{ --bg-primary: #160B14; --bg-secondary: #20111D; --bg-tertiary: #2C1826; --text-primary: #F1E6ED; --text-secondary: #BB9DB0; --text-tertiary: #806377; --accent: #D9558F; --accent-secondary: #A85CD6; --accent-hover: #C13F79; --text-on-accent: #FFFFFF; --border: #3A2233; --shadow: rgba(0, 0, 0, 0.5); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(217, 85, 143, 0.22) 0%, rgba(168, 92, 214, 0) 70%); --confirm: #4FC98A; --confirm-hover: #3EB176; --text-on-confirm: #06210F; --reject: #E5555F; --reject-hover: #CC4650; --text-on-reject: #FFFFFF; } .theme-root[theme="graphite-steel"] { --bg-primary: #101214; --bg-secondary: #181B1E; --bg-tertiary: #22262A; --text-primary: #E8EAED; --text-secondary: #A3A9B0; --text-tertiary: #6B7178; --accent: #5B9BD5; --accent-secondary: #4A7FC9; --accent-hover: #4685BE; --text-on-accent: #08151F; --border: #2E3237; --shadow: rgba(0, 0, 0, 0.45); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(91, 155, 213, 0.22) 0%, rgba(74, 127, 201, 0) 70%); --confirm: #56C29A; --confirm-hover: #43AB86; --text-on-confirm: #05201A; --reject: #D6635E; --reject-hover: #C1524D; --text-on-reject: #FFFFFF; } .theme-root[theme="arctic-frost"] { --bg-primary: #F7FAFC; --bg-secondary: #E8F1F5; --bg-tertiary: #D3E4EC; --text-primary: #1A2B33; --text-secondary: #4A6572; --disabled-text: #7C93A0; --accent: #2E86AB; --accent-secondary: #5FCBD8; --accent-hover: #24688A; --text-on-accent: #000000; --border: #C3D7DE; --shadow: rgba(26, 43, 51, 0.08); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(46, 134, 171, 0.3) 0%, rgba(95, 203, 216, 0.0) 70%); --confirm: #2FA272; --confirm-hover: #26825C; --text-on-confirm: #000000; --reject: #B82E39; --reject-hover: #97262F; --text-on-reject: #FFFFFF; } .theme-root[theme="sandstone"] { --bg-primary: #FAF6F0; --bg-secondary: #F0E6D8; --bg-tertiary: #E3D3BC; --text-primary: #3E2F23; --text-secondary: #6B5645; --disabled-text: #9C8770; --accent: #C1793B; --accent-secondary: #E8B04B; --accent-hover: #A2632E; --text-on-accent: #000000; --border: #D9C7AE; --shadow: rgba(62, 47, 35, 0.08); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(193, 121, 59, 0.3) 0%, rgba(232, 176, 75, 0.0) 70%); --confirm: #639B3B; --confirm-hover: #507E30; --text-on-confirm: #000000; --reject: #B24D34; --reject-hover: #923F2A; --text-on-reject: #FFFFFF; } .theme-root[theme="sage-garden"] { --bg-primary: #F5F8F3; --bg-secondary: #E5EEDF; --bg-tertiary: #D2E1C8; --text-primary: #263826; --text-secondary: #52684E; --disabled-text: #82977C; --accent: #5B8C5A; --accent-secondary: #3FA796; --accent-hover: #476E46; --text-on-accent: #000000; --border: #C4D8BB; --shadow: rgba(38, 56, 38, 0.08); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(91, 140, 90, 0.3) 0%, rgba(63, 167, 150, 0.0) 70%); --confirm: #36A16B; --confirm-hover: #2B8257; --text-on-confirm: #000000; --reject: #B24434; --reject-hover: #92382A; --text-on-reject: #FFFFFF; } .theme-root[theme="blush-petal"] { --bg-primary: #FDF6F7; --bg-secondary: #F9E7E9; --bg-tertiary: #F2D2D6; --text-primary: #4A2328; --text-secondary: #7A4750; --disabled-text: #A97883; --accent: #C9576D; --accent-secondary: #F08A5D; --accent-hover: #AD4159; --text-on-accent: #000000; --border: #EFC5CB; --shadow: rgba(74, 35, 40, 0.08); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(201, 87, 109, 0.3) 0%, rgba(240, 138, 93, 0.0) 70%); --confirm: #36A16B; --confirm-hover: #2B8257; --text-on-confirm: #000000; --reject: #BA2C43; --reject-hover: #992437; --text-on-reject: #FFFFFF; } .theme-root[theme="lavender-mist"] { --bg-primary: #F8F7FB; --bg-secondary: #ECE8F5; --bg-tertiary: #DCD3EE; --text-primary: #2E2740; --text-secondary: #574C6D; --disabled-text: #8A7FA0; --accent: #8B6BCC; --accent-secondary: #B15CBF; --accent-hover: #63459F; --text-on-accent: #000000; --border: #D2C4E8; --shadow: rgba(46, 39, 64, 0.08); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(139, 107, 204, 0.3) 0%, rgba(177, 92, 191, 0.0) 70%); --confirm: #3C9F6E; --confirm-hover: #318159; --text-on-confirm: #000000; --reject: #B23453; --reject-hover: #922A44; --text-on-reject: #FFFFFF; } .theme-root[theme="golden-hour"] { --bg-primary: #FFFBF2; --bg-secondary: #FCEFD1; --bg-tertiary: #F8DFA3; --text-primary: #4A3B14; --text-secondary: #7A6428; --disabled-text: #A68C4E; --accent: #E0982A; --accent-secondary: #E0562A; --accent-hover: #C07F1B; --text-on-accent: #000000; --border: #F0D9A3; --shadow: rgba(74, 59, 20, 0.08); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(224, 152, 42, 0.3) 0%, rgba(224, 86, 42, 0.0) 70%); --confirm: #59A136; --confirm-hover: #48822B; --text-on-confirm: #000000; --reject: #B8452E; --reject-hover: #973926; --text-on-reject: #FFFFFF; } /* ============ DARK THEMES ============ */ .theme-root[theme="midnight-slate"] { --bg-primary: #1B222C; --bg-secondary: #242D3A; --bg-tertiary: #313D4E; --text-primary: #E7ECF2; --text-secondary: #AAB8C7; --disabled-text: #7B8A9B; --accent: #5AA9E6; --accent-secondary: #8A6FE8; --accent-hover: #78BAF0; --text-on-accent: #000000; --border: #3D4A5C; --shadow: rgba(0, 0, 0, 0.35); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(90, 169, 230, 0.3) 0%, rgba(138, 111, 232, 0.0) 70%); --confirm: #34B273; --confirm-hover: #45C987; --text-on-confirm: #000000; --reject: #D02533; --reject-hover: #DD404D; --text-on-reject: #FFFFFF; } .theme-root[theme="obsidian"] { --bg-primary: #121212; --bg-secondary: #1C1C1C; --bg-tertiary: #2A2A2A; --text-primary: #F2F2F2; --text-secondary: #B8B8B8; --disabled-text: #808080; --accent: #E0B84B; --accent-secondary: #E0793D; --accent-hover: #F0CB65; --text-on-accent: #000000; --border: #383838; --shadow: rgba(0, 0, 0, 0.5); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(224, 184, 75, 0.3) 0%, rgba(224, 121, 61, 0.0) 70%); --confirm: #34B268; --confirm-hover: #45C97C; --text-on-confirm: #000000; --reject: #C33022; --reject-hover: #DB4133; --text-on-reject: #FFFFFF; } .theme-root[theme="deep-forest"] { --bg-primary: #12201A; --bg-secondary: #1B2E24; --bg-tertiary: #274233; --text-primary: #E4F0E8; --text-secondary: #A8C4B4; --disabled-text: #789483; --accent: #5FBF83; --accent-secondary: #3FBFA0; --accent-hover: #7ACC9A; --text-on-accent: #000000; --border: #35513F; --shadow: rgba(0, 0, 0, 0.35); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(95, 191, 131, 0.3) 0%, rgba(63, 191, 160, 0.0) 70%); --confirm: #3EB234; --confirm-hover: #50C945; --text-on-confirm: #000000; --reject: #BD3C28; --reject-hover: #D54E39; --text-on-reject: #FFFFFF; } .theme-root[theme="espresso"] { --bg-primary: #211712; --bg-secondary: #2E211A; --bg-tertiary: #3E2E24; --text-primary: #F2E9E1; --text-secondary: #C4AC9A; --disabled-text: #93796A; --accent: #D9884E; --accent-secondary: #C95E4B; --accent-hover: #E89C64; --text-on-accent: #000000; --border: #4C392E; --shadow: rgba(0, 0, 0, 0.35); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(217, 136, 78, 0.3) 0%, rgba(201, 94, 75, 0.0) 70%); --confirm: #4DAC39; --confirm-hover: #5FC34B; --text-on-confirm: #000000; --reject: #BD3C28; --reject-hover: #D54E39; --text-on-reject: #FFFFFF; } .theme-root[theme="cyber-violet"] { --bg-primary: #150F23; --bg-secondary: #1E1633; --bg-tertiary: #2B2047; --text-primary: #ECE6FA; --text-secondary: #B7A9D6; --disabled-text: #8677A8; --accent: #B15CFF; --accent-secondary: #FF5CA8; --accent-hover: #C57DFF; --text-on-accent: #000000; --border: #3E2E5E; --shadow: rgba(0, 0, 0, 0.4); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(177, 92, 255, 0.3) 0%, rgba(255, 92, 168, 0.0) 70%); --confirm: #1DC981; --confirm-hover: #2DE196; --text-on-confirm: #000000; --reject: #DA0B2E; --reject-hover: #F31B3F; --text-on-reject: #FFFFFF; } .theme-root[theme="crimson-night"] { --bg-primary: #1F1315; --bg-secondary: #2B1B1E; --bg-tertiary: #3B252A; --text-primary: #F4E5E7; --text-secondary: #C9A0A6; --disabled-text: #9B747A; --accent: #E24C5C; --accent-secondary: #E2794C; --accent-hover: #EE6675; --text-on-accent: #000000; --border: #4C2E33; --shadow: rgba(0, 0, 0, 0.4); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(226, 76, 92, 0.3) 0%, rgba(226, 121, 76, 0.0) 70%); --confirm: #34B273; --confirm-hover: #45C987; --text-on-confirm: #000000; --reject: #C91D2B; --reject-hover: #E12D3C; --text-on-reject: #FFFFFF; } /* ============ HIGH CONTRAST / ACCESSIBILITY ============ */ .theme-root[theme="high-contrast-light"] { --bg-primary: #FFFFFF; --bg-secondary: #FFFFFF; --bg-tertiary: #EFEFEF; --text-primary: #000000; --text-secondary: #1A1A1A; --disabled-text: #333333; --accent: #005FCC; --accent-secondary: #0047A3; --accent-hover: #0047A3; --text-on-accent: #FFFFFF; --border: #000000; --shadow: rgba(0, 0, 0, 0.2); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(0, 95, 204, 0.12) 0%, rgba(0, 71, 163, 0.0) 70%); --confirm: #18AA49; --confirm-hover: #138639; --text-on-confirm: #000000; --reject: #C91D1D; --reject-hover: #A51818; --text-on-reject: #FFFFFF; } .theme-root[theme="high-contrast-dark"] { --bg-primary: #000000; --bg-secondary: #000000; --bg-tertiary: #1A1A1A; --text-primary: #FFFFFF; --text-secondary: #F0F0F0; --disabled-text: #DADADA; --accent: #FFD400; --accent-secondary: #FFDF4D; --accent-hover: #FFDF4D; --text-on-accent: #000000; --border: #FFFFFF; --shadow: rgba(255, 255, 255, 0.2); --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --gradient-surface: linear-gradient(160deg, var(--bg-secondary), var(--bg-tertiary)); --gradient-glow: radial-gradient(circle, rgba(255, 212, 0, 0.12) 0%, rgba(255, 223, 77, 0.0) 70%); --confirm: #11D452; --confirm-hover: #21ED65; --text-on-confirm: #000000; --reject: #DA0B0B; --reject-hover: #F31B1B; --text-on-reject: #FFFFFF; } /* ============ EXAMPLE USAGE ============ */ /* body { background-color: var(--bg-primary); color: var(--text-primary); } .card { background-color: var(--bg-secondary); border: 1px solid var(--border); box-shadow: 0 2px 8px var(--shadow); } .card--elevated { background: var(--gradient-surface); } .subtle-panel { background-color: var(--bg-tertiary); } .hint-text { color: var(--disabled-text); } a, .btn-primary { color: var(--accent); } a:hover, .btn-primary:hover { color: var(--accent-hover); } .btn-gradient { background: var(--gradient-brand); color: var(--text-on-accent); border: none; } .hero { position: relative; overflow: hidden; background: var(--gradient-surface); } .hero::before { content: ""; position: absolute; inset: -20%; background: var(--gradient-glow); filter: blur(40px); pointer-events: none; } .gradient-heading { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } */