/* ============================================================================ GLP-1 Wellness Companion — Design tokens ---------------------------------------------------------------------------- ONE source of truth for colour. No component ever hard-codes a colour value; everything below is referenced through var(). That is deliberate: the old build decided colours with a per-component ternary and six of eight components forgot to, which is why dark mode showed blinding white cards. With this file it is structurally impossible for a panel to "miss" the theme. Every ink/surface pair below was contrast-checked to WCAG AA (>= 4.5:1 for body text, >= 3:1 for large text and UI borders). Measured ratios are noted inline — if you change a value, re-check it. ========================================================================= */ :root { /* ---- Blush Light ------------------------------------------------------ */ --bg: #FFF7FA; --bg-tint: #FDEDF4; /* page wash behind cards */ --surface: #FFFFFF; --surface-2: #FDF2F7; /* inset panels, table headers */ --surface-3: #FAE6F0; /* hover / pressed */ --ink: #2B1B2E; /* 16.2:1 on --surface */ --ink-soft: #6B5570; /* 6.7:1 on --surface */ --ink-faint: #9A85A0; /* 3.4:1 — LARGE TEXT / icons only */ --line: #F2D6E4; --line-strong: #E4B8CE; --brand: #D6336C; /* 4.6:1 on --surface */ --brand-strong: #AD1D52; --brand-soft: #FFE4EF; /* tinted chip background */ --on-brand: #FFFFFF; --accent: #7C3AED; /* 5.9:1 */ --accent-soft: #EDE4FF; --mint: #0B7D62; /* 5.0:1 — "site is rested / goal met" */ --mint-soft: #DCF5EC; --amber: #B45309; /* 4.9:1 — "resting / caution" */ --amber-soft: #FDF0DC; --danger: #BE123C; /* 6.1:1 — "avoid / red flag" */ --danger-soft: #FFE4E9; --info: #1D4ED8; --info-soft: #E0E9FF; --shadow-sm: 0 1px 2px rgba(84, 30, 60, .06), 0 1px 3px rgba(84, 30, 60, .05); --shadow-md: 0 4px 10px rgba(84, 30, 60, .07), 0 2px 4px rgba(84, 30, 60, .05); --shadow-lg: 0 12px 28px rgba(84, 30, 60, .10), 0 4px 10px rgba(84, 30, 60, .06); --ring: 0 0 0 3px rgba(214, 51, 108, .28); /* Decorative page wash. Kept as a token so dark mode can swap it wholesale instead of every gradient needing a media query. */ --wash: radial-gradient(1100px 620px at 12% -8%, #FFE1EE 0%, transparent 60%), radial-gradient(900px 520px at 100% 0%, #EFE2FF 0%, transparent 55%), radial-gradient(800px 600px at 50% 108%, #FFEAF3 0%, transparent 60%); color-scheme: light; } :root[data-theme="dark"] { /* ---- Midnight Rose ---------------------------------------------------- Warm plum, not the generic blue-grey every dark mode defaults to. Keeps the product feminine after sundown instead of turning it into a dev tool. */ --bg: #120D18; --bg-tint: #180F20; --surface: #1E1526; --surface-2: #291B33; --surface-3: #362442; --ink: #F7EAF2; /* 15.1:1 on --surface */ --ink-soft: #C4A8CC; /* 8.2:1 on --surface */ --ink-faint: #8E7799; /* 3.9:1 — LARGE TEXT / icons only */ --line: #3A2A44; --line-strong: #543D62; --brand: #FF8FB8; /* 8.3:1 on --surface */ --brand-strong: #FFB3CE; --brand-soft: #3E2130; --on-brand: #2B0F1B; /* dark ink on the light pink fill */ --accent: #C4A0FF; --accent-soft: #2E2340; --mint: #4ADE9E; --mint-soft: #12352A; --amber: #FBBF24; --amber-soft: #3A2A0C; --danger: #FB7185; --danger-soft: #3D1620; --info: #93B4FF; --info-soft: #1A2440; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 14px 34px rgba(0, 0, 0, .55); --ring: 0 0 0 3px rgba(255, 143, 184, .34); --wash: radial-gradient(1100px 620px at 12% -8%, #2C1730 0%, transparent 62%), radial-gradient(900px 520px at 100% 0%, #221A3A 0%, transparent 58%), radial-gradient(800px 600px at 50% 108%, #2A1526 0%, transparent 60%); color-scheme: dark; } /* --------------------------------------------------------------------------- Non-colour tokens ------------------------------------------------------------------------ */ :root { --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --step--1: clamp(.75rem, .71rem + .18vw, .82rem); --step-0: clamp(.875rem, .84rem + .18vw, .95rem); --step-1: clamp(1.05rem, .99rem + .30vw, 1.22rem); --step-2: clamp(1.32rem, 1.20rem + .58vw, 1.70rem); --step-3: clamp(1.65rem, 1.42rem + 1.10vw, 2.40rem); --step-4: clamp(2.05rem, 1.66rem + 1.90vw, 3.30rem); --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 42px; --sp-8: 60px; --tap: 44px; /* minimum touch target — enforced on mobile */ --shell: 1240px; --ease: cubic-bezier(.22, .61, .36, 1); } /* Honour the OS preference on very first paint, before app.js has read the saved choice. Once the user picks a theme, [data-theme] wins over this. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg:#120D18; --bg-tint:#180F20; --surface:#1E1526; --surface-2:#291B33; --surface-3:#362442; --ink:#F7EAF2; --ink-soft:#C4A8CC; --ink-faint:#8E7799; --line:#3A2A44; --line-strong:#543D62; --brand:#FF8FB8; --brand-strong:#FFB3CE; --brand-soft:#3E2130; --on-brand:#2B0F1B; --accent:#C4A0FF; --accent-soft:#2E2340; --mint:#4ADE9E; --mint-soft:#12352A; --amber:#FBBF24; --amber-soft:#3A2A0C; --danger:#FB7185; --danger-soft:#3D1620; --info:#93B4FF; --info-soft:#1A2440; --shadow-sm:0 1px 2px rgba(0,0,0,.40); --shadow-md:0 4px 12px rgba(0,0,0,.45); --shadow-lg:0 14px 34px rgba(0,0,0,.55); --ring:0 0 0 3px rgba(255,143,184,.34); --wash: radial-gradient(1100px 620px at 12% -8%, #2C1730 0%, transparent 62%), radial-gradient(900px 520px at 100% 0%, #221A3A 0%, transparent 58%), radial-gradient(800px 600px at 50% 108%, #2A1526 0%, transparent 60%); color-scheme: dark; } }