/* ============================================================ themes.css — Sun / Moon Theme Custom Properties Light theme: warm cream/sand backgrounds, terracotta accents Dark theme: "Roma di Notte" (Rome by Night) — near-black backgrounds with deep bottle-green and Roman-red accents, white text. Cupertino-inspired with Italian 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) ── "Roma di Notte" ─────────────────── */ [data-theme="moon"] { /* Backgrounds — near-black with a whisper of bottle-green, like Rome's stone and cypress trees under a night sky */ --bg-primary: #10160F; /* near-black night green */ --bg-secondary: #161D14; /* dark green charcoal */ --bg-tertiary: #1D2519; /* deeper green charcoal */ --bg-elevated: #1A2117; /* cards / modals */ --bg-hover: #212B1C; /* hover states */ --bg-active: #29341F; /* active / pressed */ /* Text — white, WCAG AA compliant contrast */ --text-primary: #F7F7F4; /* soft white (16.5:1 ratio) */ --text-secondary: #CBCFC7; /* pale sage-white (10.2:1 ratio)*/ --text-tertiary: #9BA296; /* muted sage-grey (6.1:1 ratio) */ --text-inverse: #10160F; /* dark text on light bg */ --text-on-accent: #FFFFFF; /* white text on red/green buttons */ /* Accent — deep Roman red */ --accent: #C1443F; /* Roman red (5.3:1 with white text) */ --primary: #C1443F; /* primary alias (dark mode override) */ --accent-hover: #A93A36; /* red darker */ --primary-hover: #A93A36; /* primary hover alias */ --accent-active: #8F302D; /* red darkest */ --accent-subtle: #3A1917; /* red tint for tags */ --accent-text: #E2726B; /* brighter red for text links (4.8:1 ratio) */ /* Secondary accent — dark bottle green */ --accent2: #5FA873; /* pine/emerald green (5.2:1 ratio) */ --accent2-hover: #4C8B60; /* green darker */ --accent2-subtle: #1C2B1E; /* green tint */ /* Semantic colors */ --success: #5FAE72; /* green (matches accent2 family) */ --success-bg: #182D1B; /* success background */ --error: #E2726B; /* Roman red (matches accent-text) */ --error-bg: #3A1917; /* error background */ --warning: #D2A44A; /* warm amber, lantern-light */ --warning-bg: #332A16; /* warning background */ --info: #6FA0B8; /* muted moonlight blue */ --info-bg: #172630; /* info background */ /* Borders & separators */ --border: #33402E; /* dark green-grey border */ --border-subtle: #212B1C; /* subtle divider */ --border-focus: #C1443F; /* focus ring (Roman red) */ /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25); /* Overlays */ --overlay: rgba(0, 0, 0, 0.6); /* 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); }