/* ============================================================ Lunar Calendar — Design System v4 Generated with AI assistance. Reviewed/edited by team. Three themes: Rose (default), Dark Midnight, Light Muted Rose theme inspired by: pink hearts, lotus, Celtic knot logo WHY: CSS custom properties (tokens) for every colour allow instant theme switching without any JS DOM manipulation— we only swap the data-theme attribute on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); /* === Rose Theme (Default) — Soft, Readable Pink === */ :root, [data-theme="rose"] { --font: 'Inter', sans-serif; --font-display: 'Inter', sans-serif; --bg: #FFF5E4; --surface: rgba(255, 227, 225, 0.85); --surface2: rgba(255, 227, 225, 0.95); --surface3: rgba(255, 209, 209, 0.3); --border: #FFD1D1; --text: #38302e; --text2: #524744; --text3: #8a7a76; --primary: #FF9494; --primary-rgb: 255, 148, 148; --primary-soft: rgba(255, 148, 148, 0.15); --primary-hover: #ff7a7a; --accent: #FFD1D1; --accent-soft: rgba(255, 209, 209, 0.3); --accent-glow: rgba(255, 209, 209, 0.6); --phase-men: #d93d3d; --phase-men-soft: rgba(217, 61, 61, 0.18); --phase-fol: #4d9461; --phase-fol-soft: rgba(77, 148, 97, 0.18); --phase-ovu: #e69c1e; --phase-ovu-soft: rgba(230, 156, 30, 0.18); --phase-lut: #765bc2; --phase-lut-soft: rgba(118, 91, 194, 0.18); --success: #429e59; --success-soft: rgba(66, 158, 89, 0.18); --error: #d93d3d; --error-soft: rgba(255, 215, 215, 0.65); --warning: #e69c1e; --warning-soft: rgba(230, 156, 30, 0.18); --tag-stress: #FF9494; --tag-energy: #e69c1e; --tag-sleep: #4d9461; --radius: 20px; --radius-sm: 100px; --radius-lg: 28px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.8); --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.06), inset 0 2px 3px rgba(255, 255, 255, 0.8); --shadow-glow: 0 0 20px rgba(255, 148, 148, 0.2); --nav-bg: rgba(255, 245, 228, 0.85); --nav-blur: blur(24px); --glass-glare: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%); --glass-border-strong: rgba(255, 255, 255, 0.9); --glass-glare-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); --glass-input-bg: rgba(255, 255, 255, 0.5); --glass-input-border: #FFD1D1; --glass-input-focus: rgba(255, 255, 255, 0.95); --glass-input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); --glass-btn-bg: rgba(255, 255, 255, 0.6); --glass-btn-border: #FFD1D1; --glass-btn-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8); --gradient-primary: linear-gradient(135deg, #FF9494, #ff7b7b); --gradient-secondary: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 227, 225, 0.4) 100%); --gradient-hero: radial-gradient(circle at top right, #FFFFFF 0%, #FFF5E4 50%, #FFE3E1 100%); --gradient-auth: radial-gradient(circle at center, #FFFFFF 0%, #FFF5E4 40%, #FFE3E1 100%); } /* === Menstra Theme — Earthy, Cream & Coral Red === */ /* SUGGESTION: If you want to adjust the Menstra branding in the future, change the --primary (dusty rose) and --accent (coral red) variables here. */ [data-theme="menstra"] { --font: 'Inter', sans-serif; --font-display: 'Inter', sans-serif; --bg: #fdfaf6; --surface: rgba(255, 255, 255, 0.85); --surface2: rgba(251, 233, 209, 0.6); --surface3: rgba(223, 170, 152, 0.25); --border: rgba(182, 100, 114, 0.25); --text: #383838; --text2: #484848; --text3: #b66472; --primary: #b66472; --primary-rgb: 182, 100, 114; --primary-soft: rgba(182, 100, 114, 0.15); --primary-hover: #9e5360; --accent: #dd2739; --accent-soft: rgba(221, 39, 57, 0.12); --accent-glow: rgba(182, 100, 114, 0.35); --phase-men: #dd2739; --phase-men-soft: rgba(221, 39, 57, 0.15); --phase-fol: #4d9461; --phase-fol-soft: rgba(77, 148, 97, 0.15); --phase-ovu: #e69c1e; --phase-ovu-soft: rgba(230, 156, 30, 0.15); --phase-lut: #765bc2; --phase-lut-soft: rgba(118, 91, 194, 0.15); --success: #429e59; --success-soft: rgba(66, 158, 89, 0.15); --error: #dd2739; --error-soft: rgba(221, 39, 57, 0.15); --warning: #e69c1e; --warning-soft: rgba(230, 156, 30, 0.15); --tag-stress: #dd2739; --tag-energy: #e69c1e; --tag-sleep: #4d9461; --radius: 20px; --radius-sm: 100px; --radius-lg: 28px; --shadow: 0 4px 18px rgba(182, 100, 114, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 6px rgba(251, 233, 209, 0.2); --shadow-lg: 0 10px 32px rgba(182, 100, 114, 0.15), inset 0 2px 3px rgba(255, 255, 255, 0.95), inset 0 -3px 8px rgba(251, 233, 209, 0.2); --shadow-glow: 0 0 20px rgba(182, 100, 114, 0.25); --nav-bg: rgba(253, 250, 246, 0.85); --nav-blur: blur(24px); --glass-glare: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%); --glass-border-strong: rgba(255, 255, 255, 0.9); --glass-glare-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); --glass-input-bg: rgba(255, 255, 255, 0.7); --glass-input-border: rgba(182, 100, 114, 0.2); --glass-input-focus: rgba(255, 255, 255, 0.98); --glass-input-shadow: inset 0 2px 4px rgba(182, 100, 114, 0.03); --glass-btn-bg: rgba(255, 255, 255, 0.7); --glass-btn-border: rgba(182, 100, 114, 0.25); --glass-btn-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9); --gradient-primary: linear-gradient(135deg, #b66472, #dd2739); --gradient-secondary: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(253, 250, 246, 0.5) 100%); --gradient-hero: radial-gradient(circle at top right, #ffffff 0%, #fdfaf6 50%, #fbe9d1 100%); --gradient-auth: radial-gradient(circle at center, #ffffff 0%, #fdfaf6 40%, #fbe9d1 100%); } /* === Light Theme — Genuine Warm Amber/Peach === */ [data-theme="light"] { /* Warm earthy amber/orange background - deeper, more colorful */ --bg: #fae4cd; --surface: rgba(253, 234, 215, 0.85); --surface2: rgba(250, 224, 200, 0.90); --surface3: rgba(245, 214, 185, 0.95); --border: rgba(255, 248, 240, 0.80); /* Very dark rich brown for readability */ --text: #21130a; --text2: #402615; --text3: #6b4124; --primary: #c95c26; --primary-rgb: 201, 92, 38; --primary-soft: rgba(201, 92, 38, 0.15); --primary-hover: #a64618; --accent: #d97d36; --accent-soft: rgba(217, 125, 54, 0.18); --accent-glow: rgba(217, 125, 54, 0.35); --phase-men: #bd4033; --phase-men-soft: rgba(189, 64, 51, 0.15); --phase-fol: #48874c; --phase-fol-soft: rgba(72, 135, 76, 0.15); --phase-ovu: #c98528; --phase-ovu-soft: rgba(201, 133, 40, 0.15); --phase-lut: #66759e; --phase-lut-soft: rgba(102, 117, 158, 0.15); --success-soft: rgba(77, 139, 90, 0.15); --error-soft: rgba(189, 64, 51, 0.15); --tag-stress: #bd4033; --tag-energy: #c98528; --tag-sleep: #48874c; --shadow: 0 4px 18px rgba(100, 50, 20, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 6px rgba(160, 90, 40, 0.08); --shadow-lg: 0 10px 32px rgba(100, 50, 20, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 8px rgba(160, 90, 40, 0.12); --shadow-glow: 0 0 24px rgba(217, 125, 54, 0.25); /* Warm nav — golden/amber tint */ --nav-bg: rgba(250, 230, 210, 0.85); --nav-blur: blur(24px); --glass-glare: linear-gradient(180deg, rgba(255, 255, 250, 0.4) 0%, rgba(255, 255, 250, 0) 100%); --glass-border-strong: rgba(255, 250, 240, 0.6); --glass-glare-strong: linear-gradient(180deg, rgba(255, 255, 250, 0.5), rgba(255, 255, 250, 0)); --glass-input-bg: rgba(252, 238, 222, 0.65); --glass-input-border: rgba(255, 250, 240, 0.6); --glass-input-focus: rgba(255, 255, 250, 0.95); --glass-input-shadow: inset 0 2px 4px rgba(100, 50, 20, 0.05); --glass-btn-bg: rgba(252, 238, 222, 0.6); --glass-btn-border: rgba(255, 250, 240, 0.6); --glass-btn-shadow: inset 0 2px 4px rgba(255, 255, 250, 0.4); --gradient-secondary: linear-gradient(180deg, rgba(255, 255, 250, 0.65) 0%, rgba(250, 230, 210, 0.45) 100%); --gradient-primary: linear-gradient(135deg, #d97d36, #c95c26); --gradient-hero: linear-gradient(160deg, #fae4cd 0%, #f5d4b5 50%, #e6bb91 100%); --gradient-auth: linear-gradient(160deg, #e6bb91 0%, #f5d4b5 40%, #fae4cd 100%); } /* === Brightness & Logo Styles === */ [data-brightness="dim"] { filter: brightness(0.85); } [data-brightness="bright"] { filter: brightness(1.15); } /* .bg-watermark { position: fixed; top: 50%; left: 50%; width: 120vw; height: 120vw; max-width: 600px; max-height: 600px; transform: translate(-50%, -50%); background-image: url('/img/logo.jpg'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.05; pointer-events: none; z-index: -1; mix-blend-mode: multiply; } [data-theme="dark"] .bg-watermark { mix-blend-mode: screen; opacity: 0.07; } */ .nav-brand-logo { height: 28px; width: auto; margin-right: 8px; mix-blend-mode: multiply; } [data-theme="dark"] .nav-brand-logo { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg); } /* === Dark Theme — Pink/Purple Night === */ [data-theme="dark"] { --bg: #140b12; --surface: rgba(33, 20, 31, 0.65); --surface2: rgba(43, 25, 41, 0.7); --surface3: rgba(56, 33, 53, 0.85); --border: rgba(255, 255, 255, 0.1); --text: #f5e4ed; --text2: #cfb1c3; --text3: #a37f94; --primary: #d46399; --primary-rgb: 212, 99, 153; --primary-soft: rgba(212, 99, 153, 0.15); --primary-hover: #e87eb0; --accent: #a366cc; --accent-soft: rgba(163, 102, 204, 0.12); --accent-glow: rgba(212, 99, 153, 0.15); --phase-men: #e07070; --phase-men-soft: rgba(224, 112, 112, 0.12); --phase-fol: #6db876; --phase-fol-soft: rgba(109, 184, 118, 0.1); --phase-ovu: #e8b87a; --phase-ovu-soft: rgba(232, 184, 122, 0.1); --phase-lut: #9a8ad4; --phase-lut-soft: rgba(154, 138, 212, 0.1); --success-soft: rgba(109, 184, 118, 0.1); --error-soft: rgba(224, 112, 112, 0.1); --warning-soft: rgba(232, 184, 122, 0.1); --tag-stress: #e07070; --tag-energy: #e8b87a; --tag-sleep: #6db876; --shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.04), inset 0 -2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.06), inset 0 -4px 16px rgba(0, 0, 0, 0.5); /* WHY higher shadow-glow opacity: on dark backgrounds, the subtle pink glow around cards creates a premium "neon" feel */ --shadow-glow: 0 0 30px rgba(224, 127, 154, 0.12); --nav-bg: rgba(11, 13, 20, 0.8); --nav-blur: blur(20px); /* WHY slightly brighter glass borders: on pure-dark backgrounds, 0.08 borders become invisible — 0.14 gives a subtle edge */ --glass-glare: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%); --glass-border-strong: rgba(255, 255, 255, 0.16); --glass-glare-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); --glass-input-bg: rgba(0, 0, 0, 0.3); --glass-input-border: rgba(255, 255, 255, 0.1); --glass-input-focus: rgba(255, 255, 255, 0.25); --glass-input-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); --glass-btn-bg: rgba(30, 36, 52, 0.6); --glass-btn-border: rgba(255, 255, 255, 0.12); --glass-btn-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05); --gradient-secondary: linear-gradient(180deg, rgba(53, 33, 50, 0.5) 0%, rgba(31, 20, 30, 0.8) 100%); --gradient-primary: linear-gradient(135deg, #b04e81, #d46399); --gradient-hero: linear-gradient(160deg, #140b12 0%, #261221 100%); --gradient-auth: linear-gradient(160deg, #1f0b1a 0%, #261221 30%, #30172a 60%, #140b12 100%); }