/* ===================================================== Selectable colour palettes (Settings → Color theme) The default "Electric Green" palette lives in tokens.css :root. These rules override only the brand-accent family for users who pick another palette. Applied via and inherited by both the server templates and the React islands (all read var(--craft-*) from the document root). Works in both light and dark mode. --accent-contrast = the label colour that sits on a solid accent (primary button bg). Electric Green is light → ink (the tokens.css fallback). Indigo and Dark Purple are dark in light mode → white; in dark mode the accent is lightened for readability on the midnight bg, so the contrast flips to ink. ===================================================== */ /* ── Indigo — the previous dark-purple brand accent ───── */ :root[data-palette="indigo"] { --craft-indigo: #4F46E5; --craft-indigo-hover: #4338CA; --craft-indigo-tint: rgba(79, 70, 229, 0.12); --craft-green-text: #4F46E5; --accent-contrast: #FFFFFF; --craft-gradient-hero: linear-gradient(135deg, #3730A3 0%, #6366F1 50%, #A855F7 100%); --craft-gradient-accent: linear-gradient(90deg, #4338CA 0%, #6366F1 100%); } /* ── Dark Purple — deep indigo accent (#4B0082) ───────── */ :root[data-palette="purple"] { --craft-indigo: #4B0082; --craft-indigo-hover: #6A0DAD; --craft-indigo-tint: rgba(75, 0, 130, 0.12); --craft-green-text: #4B0082; --accent-contrast: #FFFFFF; --craft-gradient-hero: linear-gradient(135deg, #2E0854 0%, #4B0082 50%, #9333EA 100%); --craft-gradient-accent: linear-gradient(90deg, #4B0082 0%, #7C3AED 100%); } /* Dark mode: the deep accents are unreadable as text/icons on the midnight background, so lighten them (and flip the on-accent label back to ink). */ :root[data-palette="indigo"][data-theme="dark"] { --craft-indigo: #A5B4FC; --craft-indigo-hover: #C7D2FE; --craft-indigo-tint: rgba(165, 180, 252, 0.16); --craft-green-text: #A5B4FC; --accent-contrast: #0E2233; --craft-gradient-hero: linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #A855F7 100%); --craft-gradient-accent: linear-gradient(90deg, #6366F1 0%, #818CF8 100%); } :root[data-palette="purple"][data-theme="dark"] { /* Deeper, more on-brand purple in dark mode (closer to #4B0082) while keeping the accent legible on the midnight background — #A855F7 is the deepest shade that still clears AA contrast for text/icons; hover lightens for feedback. */ --craft-indigo: #A855F7; --craft-indigo-hover: #C084FC; --craft-indigo-tint: rgba(168, 85, 247, 0.18); --craft-green-text: #A855F7; --accent-contrast: #FFFFFF; --craft-gradient-hero: linear-gradient(135deg, #4B0082 0%, #7C3AED 50%, #A855F7 100%); --craft-gradient-accent: linear-gradient(90deg, #6D28D9 0%, #9333EA 100%); } /* ── Electric Green — the default brand accent (tokens.css :root) ────────────── Green (#53E867) is a LIGHT accent, so a white label on a primary button only reaches ~1.6:1 (fails WCAG AA). Pin --accent-contrast to ink so primary-button labels clear AA (#0E2233 on #53E867 ≈ 10:1). The accent bg stays light in dark mode too, so ink holds for both themes — no separate dark override needed. */ :root[data-palette="green"] { --accent-contrast: #0E2233; } /* ── Forest — deep brand green (#1E8F4E) ───────────── */ :root[data-palette="forest"] { --craft-indigo: #1E8F4E; --craft-indigo-hover: #187A42; --craft-indigo-tint: rgba(30, 143, 78, 0.12); --craft-green-text: #1E8F4E; --accent-contrast: #FFFFFF; --craft-gradient-hero: linear-gradient(135deg, #0F5C30 0%, #1E8F4E 50%, #53E867 100%); --craft-gradient-accent: linear-gradient(90deg, #187A42 0%, #27B35C 100%); } :root[data-palette="forest"][data-theme="dark"] { --craft-indigo: #4DD97A; --craft-indigo-hover: #6EE898; --craft-indigo-tint: rgba(77, 217, 122, 0.16); --craft-green-text: #4DD97A; --accent-contrast: #0E2233; --craft-gradient-hero: linear-gradient(135deg, #1E8F4E 0%, #27B35C 50%, #53E867 100%); --craft-gradient-accent: linear-gradient(90deg, #27B35C 0%, #4DD97A 100%); } /* ── Sunbeam — warm amber (#F4A259) ─────────────────── */ :root[data-palette="sunbeam"] { --craft-indigo: #F4A259; --craft-indigo-hover: #E88E3E; --craft-indigo-tint: rgba(244, 162, 89, 0.12); --craft-green-text: #B5621A; --accent-contrast: #0E2233; --craft-gradient-hero: linear-gradient(135deg, #C8621A 0%, #F4A259 50%, #FDDBA1 100%); --craft-gradient-accent: linear-gradient(90deg, #E88E3E 0%, #F4A259 100%); } :root[data-palette="sunbeam"][data-theme="dark"] { --craft-indigo: #FBBF71; --craft-indigo-hover: #FDD09A; --craft-indigo-tint: rgba(251, 191, 113, 0.16); --craft-green-text: #FBBF71; --accent-contrast: #0E2233; --craft-gradient-hero: linear-gradient(135deg, #B5621A 0%, #E88E3E 50%, #F4A259 100%); --craft-gradient-accent: linear-gradient(90deg, #F4A259 0%, #FBBF71 100%); } /* ── Terracotta — warm red-orange (#E76F51) ──────────── */ :root[data-palette="terracotta"] { --craft-indigo: #E76F51; --craft-indigo-hover: #D45A3B; --craft-indigo-tint: rgba(231, 111, 81, 0.12); --craft-green-text: #A83A1F; --accent-contrast: #FFFFFF; --craft-gradient-hero: linear-gradient(135deg, #8B2500 0%, #E76F51 50%, #F4A17D 100%); --craft-gradient-accent: linear-gradient(90deg, #D45A3B 0%, #E76F51 100%); } :root[data-palette="terracotta"][data-theme="dark"] { --craft-indigo: #F4977A; --craft-indigo-hover: #F7B39A; --craft-indigo-tint: rgba(244, 151, 122, 0.16); --craft-green-text: #F4977A; --accent-contrast: #0E2233; --craft-gradient-hero: linear-gradient(135deg, #A83A1F 0%, #D45A3B 50%, #E76F51 100%); --craft-gradient-accent: linear-gradient(90deg, #E76F51 0%, #F4977A 100%); } /* ── Ocean — teal/cyan (#0891B2) ─────────────────────── */ :root[data-palette="ocean"] { --craft-indigo: #0891B2; --craft-indigo-hover: #0B7FA0; --craft-indigo-tint: rgba(8, 145, 178, 0.12); --craft-green-text: #0891B2; --accent-contrast: #FFFFFF; --craft-gradient-hero: linear-gradient(135deg, #164E63 0%, #0891B2 50%, #38BDF8 100%); --craft-gradient-accent: linear-gradient(90deg, #0B7FA0 0%, #0891B2 100%); } :root[data-palette="ocean"][data-theme="dark"] { --craft-indigo: #38BDF8; --craft-indigo-hover: #7DD3FC; --craft-indigo-tint: rgba(56, 189, 248, 0.16); --craft-green-text: #38BDF8; --accent-contrast: #0E2233; --craft-gradient-hero: linear-gradient(135deg, #0891B2 0%, #0EA5E9 50%, #38BDF8 100%); --craft-gradient-accent: linear-gradient(90deg, #0891B2 0%, #38BDF8 100%); } /* ── Midnight — deep indigo-navy (#1E3A5F) ──────────── */ :root[data-palette="midnight"] { --craft-indigo: #1E3A5F; --craft-indigo-hover: #2A4F7C; --craft-indigo-tint: rgba(30, 58, 95, 0.12); --craft-green-text: #1E3A5F; --accent-contrast: #FFFFFF; --craft-gradient-hero: linear-gradient(135deg, #0A1929 0%, #1E3A5F 50%, #3B6EA5 100%); --craft-gradient-accent: linear-gradient(90deg, #1E3A5F 0%, #2D5FA0 100%); } :root[data-palette="midnight"][data-theme="dark"] { --craft-indigo: #7EB3E8; --craft-indigo-hover: #A3CAFB; --craft-indigo-tint: rgba(126, 179, 232, 0.16); --craft-green-text: #7EB3E8; --accent-contrast: #0E2233; --craft-gradient-hero: linear-gradient(135deg, #1E3A5F 0%, #2D5FA0 50%, #5B8EC4 100%); --craft-gradient-accent: linear-gradient(90deg, #3B6EA5 0%, #7EB3E8 100%); }