/* ============================================================ themes.css — Sun / Moon Theme Custom Properties Light theme: warm cream/sand backgrounds, terracotta accents Dark theme: deep charcoal/espresso, warm gold accents Cupertino-inspired with Spanish warmth. WCAG AA Contrast Compliant. ============================================================ */ /* ── Light Theme (Sun) ── default ─────────────────────────── */ :root, [data-theme="sun"] { /* Backgrounds */ --bg-primary: #FBF7F0; /* warm cream */ --bg-secondary: #F3EDE2; /* sand */ --bg-tertiary: #EBE3D5; /* deeper sand */ --bg-elevated: #FFFFFF; /* cards / modals */ --bg-hover: #F0E8DA; /* hover states */ --bg-active: #E8DEC9; /* active / pressed */ /* Text — WCAG AA compliant contrast */ --text-primary: #2C2419; /* dark espresso (14.5:1 ratio) */ --text-secondary: #594B3C; /* warm brown (7.2:1 ratio) */ --text-tertiary: #6E5F4F; /* muted sand (5.1:1 ratio) */ --text-inverse: #FBF7F0; /* light text on dark bg */ --text-on-accent: #FFFFFF; /* text on accent buttons */ /* Accent — terracotta family */ --accent: #C4553A; /* terracotta primary */ --primary: #C4553A; /* primary alias */ --accent-hover: #B04A32; /* terracotta darker */ --primary-hover: #B04A32; /* primary hover alias */ --accent-active: #9C3F2A; /* terracotta darkest */ --accent-subtle: #F5E0D9; /* terracotta tint for tags */ --accent-text: #9E3E28; /* terracotta for text links (5.2:1 ratio) */ /* Secondary accent — olive */ --accent2: #596C2E; /* olive green (4.8:1 ratio) */ --accent2-hover: #4D5D27; /* olive darker */ --accent2-subtle: #E3EACD; /* olive tint */ /* Semantic colors */ --success: #2A7244; /* forest green (5.4:1 ratio) */ --success-bg: #E6F4EC; /* success background */ --error: #B83C22; /* terracotta/crimson */ --error-bg: #FCE8E3; /* error background */ --warning: #A66D1B; /* warm amber (4.7:1 ratio) */ --warning-bg: #FFF3DB; /* warning background */ --info: #376789; /* dusty blue (5.5:1 ratio) */ --info-bg: #E3EFF7; /* info background */ /* Borders & separators */ --border: #CFC4B2; /* warm border */ --border-subtle: #E5DDD0; /* subtle divider */ --border-focus: #C4553A; /* focus ring color */ /* Shadows */ --shadow-sm: 0 1px 3px rgba(44, 36, 25, 0.06), 0 1px 2px rgba(44, 36, 25, 0.04); --shadow-md: 0 4px 12px rgba(44, 36, 25, 0.08), 0 2px 4px rgba(44, 36, 25, 0.04); --shadow-lg: 0 12px 32px rgba(44, 36, 25, 0.12), 0 4px 8px rgba(44, 36, 25, 0.06); --shadow-elevated: 0 8px 24px rgba(44, 36, 25, 0.10), 0 2px 6px rgba(44, 36, 25, 0.05); /* Overlays */ --overlay: rgba(44, 36, 25, 0.3); /* Radii (Cupertino-style generous rounding) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-index layers */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* Theme toggle icon */ --theme-icon-filter: none; } /* ── Dark Theme (Moon) ── ─────────────────────────────────── */ [data-theme="moon"] { /* Backgrounds */ --bg-primary: #1A1612; /* deep espresso */ --bg-secondary: #231F1A; /* dark brown */ --bg-tertiary: #2E2822; /* charcoal brown */ --bg-elevated: #2A241E; /* cards / modals */ --bg-hover: #352E26; /* hover states */ --bg-active: #3F372D; /* active / pressed */ /* Text — WCAG AA compliant contrast */ --text-primary: #F4ECE1; /* warm off-white (13.8:1 ratio) */ --text-secondary: #CBBBA7; /* muted sand (7.8:1 ratio) */ --text-tertiary: #AA9B89; /* dim brown (5.6:1 ratio) */ --text-inverse: #1A1612; /* dark text on light bg */ --text-on-accent: #1A1612; /* dark text on gold buttons */ /* Accent — warm gold */ --accent: #E0B94F; /* warm gold (9.5:1 on dark) */ --accent-hover: #CFA843; /* gold darker */ --accent-active: #BE9737; /* gold darkest */ --accent-subtle: #3D3522; /* gold tint for tags */ --accent-text: #E8C463; /* gold for text links */ /* Secondary accent — sage */ --accent2: #9CB368; /* sage green */ --accent2-hover: #899E57; /* sage darker */ --accent2-subtle: #2E3320; /* sage tint */ /* Semantic colors */ --success: #68C389; /* green */ --success-bg: #172B1D; /* success background */ --error: #E58069; /* warm coral */ --error-bg: #2B1B17; /* error background */ --warning: #E0B94F; /* gold (matches accent) */ --warning-bg: #2E2818; /* warning background */ --info: #7AB4DA; /* soft blue */ --info-bg: #162430; /* info background */ /* Borders & separators */ --border: #473F36; /* dark warm border */ --border-subtle: #352E26; /* subtle divider */ --border-focus: #E0B94F; /* focus ring (gold) */ /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15); /* Overlays */ --overlay: rgba(0, 0, 0, 0.5); /* Theme toggle icon */ --theme-icon-filter: invert(1); } /* ── Theme Transition ─────────────────────────────────────── */ /* Smooth color transitions when toggling themes. */ /* Applied to html so all inherited props transition together. */ html { transition: background-color var(--transition-base), color var(--transition-base); } /* Elements that need explicit transition (backgrounds, borders) */ body, main, section, .card, .btn, .input, .select, .tag, .badge, .banner, header, footer, nav { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }