/* ───────────────────────────────────────────────────────────────────────────── Jupiter Fertility — Design Tokens Two complete skins as CSS variables. The class (.sanctuary / .cosmos) selects which palette renders. Every color in the site reads from these vars, so one skeleton renders two worlds. Values from WEBSITE-DESIGN-SPEC §1. ───────────────────────────────────────────────────────────────────────────── */ :root { /* Shared — fonts, radii, spacing (identical across both worlds) */ --jf-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --jf-font-body: 'Quicksand', system-ui, -apple-system, sans-serif; --jf-font-mono: 'Xanh Mono', ui-monospace, monospace; --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --section-pad: clamp(3.5rem, 7vh, 6rem); --content-max: 72rem; --content-narrow: 46rem; /* Gold gradient + ink-on-gold are constant in both worlds (gold works on light & dark) */ --gold-pill: linear-gradient(135deg, #E6D08A 0%, #C4A951 60%, #6E561B 100%); --ink-on-gold: #1F1B30; --switch-ms: 300ms; } /* ── SANCTUARY (light · default) ──────────────────────────────────────────── */ body.sanctuary { --bg: #FAF9F6; /* Diamond White */ --bg-edge: #EFEAF8; /* faint Lavender Mist */ --card-top: #FFFFFF; --card-bot: #FBF9FE; --elevated: #F3EEFB; --hairline: rgba(74,42,134,0.16); --gold-hairline: rgba(196,169,81,0.55); --text: #1F1B30; /* Text Ink */ --text-2: #433D58; --label: #5C5470; --gold: #C4A951; /* CTA / border / rule */ --gold-bright: #E6D08A; --gold-text: #6E561B; /* gold TEXT on light — deepened for readability */ --gold-deep: #6E561B; --violet: #4A2A86; /* Royal Violet */ --violet-lit: #5B36A0; --peacock: #0A7A90; --lapis: #1E4AA0; --emerald: #2D7C6C; --blush: #C77F6A; --h1: var(--violet); --card-shadow: 0 14px 38px -16px rgba(74,42,134,0.26), 0 3px 12px rgba(74,42,134,0.10); /* luminous field + blooms */ --field: radial-gradient(circle at 50% -10%, #FFFFFF 0%, #FAF9F6 45%, #EFEAF8 100%); --bloom-violet: rgba(138,107,208,0.16); --bloom-blush: rgba(199,127,106,0.12); --bloom-gold: rgba(196,169,81,0.22); --dust: rgba(196,169,81,0.5); /* fixed colored panels (white text lives ONLY here) */ --panel-science-bg: #1E4AA0; /* Sacred Lapis */ --panel-science-text: #FAF9F6; --panel-dark-bg: #3A348F; /* Midnight Violet */ --panel-dark-text: #FAF9F6; --veil-science: rgba(30,74,160,0.07); --veil-dark: rgba(58,52,143,0.08); /* hero ring system — Jupiter (icy) + Saturn (gold) line-work */ --ring-gold: rgba(196,169,81,0.32); --ring-ice: rgba(110,135,205,0.24); --ring-glow: rgba(196,169,81,0.22); } /* ── COSMOS (dark · alt) ──────────────────────────────────────────────────── */ body.cosmos { --bg: #07050E; /* deep space */ --bg-edge: #04030A; --card-top: #15101F; --card-bot: #231A3C; --elevated: #1C1530; --hairline: #2E2448; --gold-hairline: #3D3057; --text: #FAF9F6; /* Diamond White */ --text-2: #DAD6E8; --label: #A9A2C0; --gold: #C4A951; --gold-bright: #E0C97A; --gold-text: #E0C97A; /* bright gold reads on black */ --gold-deep: #9A8540; --violet: #4A2A86; --violet-lit: #8A6BD0; --peacock: #0E8FA8; --lapis: #1E4AA0; --emerald: #2D7C6C; --blush: #C77F6A; --h1: var(--violet-lit); --card-shadow: 0 18px 46px -16px rgba(0,0,0,0.7), 0 4px 14px rgba(0,0,0,0.55); --field: radial-gradient(circle at 50% -10%, #120C26 0%, #07050E 55%, #04030A 100%); --bloom-violet: rgba(74,42,134,0.45); --bloom-blush: rgba(138,107,208,0.18); --bloom-gold: rgba(196,169,81,0.18); --dust: rgba(255,255,255,0.55); --panel-science-bg: #15264A; /* deepened lapis on dark */ --panel-science-text: #FAF9F6; --panel-dark-bg: #0E0A1C; /* deepened womb on dark */ --panel-dark-text: #FAF9F6; --veil-science: rgba(60,90,160,0.14); --veil-dark: rgba(138,107,208,0.10); /* hero ring system — brighter on the dark ground */ --ring-gold: rgba(230,208,138,0.38); --ring-ice: rgba(175,205,255,0.34); --ring-glow: rgba(196,169,81,0.20); }