/* ------------------------------------------------------------------ Design tokens. One place to switch palette and theme. Default theme is Daylight (the brief's stated default). Purple & teal (the prototype study) is available behind [data-theme="purple-teal"] on . ------------------------------------------------------------------ */ :root { /* Type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Fluid type scale (mobile-first, scales gently up) */ --fs-hello: clamp(1.55rem, 6vw, 1.85rem); --fs-q: clamp(1.5rem, 5.6vw, 1.75rem); --fs-body: clamp(0.95rem, 3.7vw, 1.02rem); --fs-lead: clamp(0.88rem, 3.4vw, 0.95rem); --fs-small: clamp(0.78rem, 3vw, 0.82rem); /* Radii & shadow */ --r: 16px; --r-sm: 14px; --r-pill: 999px; --shadow: 0 18px 50px rgba(34, 42, 85, .12); --shadow-sm: 0 4px 16px rgba(34, 42, 85, .07); /* Layered elevation for cards (a close contact shadow + a soft ambient one) */ --shadow-card: 0 1px 2px rgba(34, 42, 85, .05), 0 10px 30px -12px rgba(34, 42, 85, .16); --shadow-glow: 0 20px 60px -18px color-mix(in srgb, var(--primary) 40%, transparent); /* Motion */ --ease-out: cubic-bezier(.22, .7, .3, 1); --ease-soft: cubic-bezier(.4, .1, .2, 1); /* Touch */ --tap: 48px; /* Safe areas */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ---------------------------- Daylight ---------------------------- */ :root, [data-theme="daylight"] { --bg-1: #E7F0FA; --bg-2: #F4F8FC; --surface: #FFFFFF; --surface-2: #F3F7FC; --surface-3: #E8EFF7; --ink: #222A55; --ink-soft: #4C5479; --ink-mute: #8C93B2; /* single sunset-coral accent */ --primary: #E2593F; --primary-btn: #D94E34; --primary-soft: #FBE9E3; /* secondary echoes the indigo ink for quiet accents */ --secondary: #3D4781; --secondary-soft: #E8EBF6; --grad: linear-gradient(140deg, #EE8261 0%, #E2593F 100%); --line: #E2E8F2; --line-soft: #EDF1F8; --on-dark: #FFFFFF; --on-primary: #FFFFFF; /* text/icon colour on a primary fill */ --on-secondary: #FFFFFF; /* text/icon colour on a secondary fill */ --moment-bg: #222A55; --moment-wave: rgba(232, 106, 82, .45); /* Per-mood hues for the check-in scale — a calm cool→warm gradient, kept muted so nothing on this screen ever feels like a verdict. */ --mood-1: #6E7BB8; /* Difficult — soft indigo */ --mood-2: #5E86B0; /* Hard — slate blue */ --mood-3: #4F97A6; /* Okay — quiet teal */ --mood-4: #4FA88C; /* Good — sea green */ --mood-5: #C98A57; /* Strong — warm amber */ } /* --------------------------- Purple & teal ------------------------ */ [data-theme="purple-teal"] { --bg-1: #F7F6FC; --bg-2: #EEF5F6; --surface: #FFFFFF; --surface-2: #F5F4FA; --surface-3: #ECEFF5; --ink: #25273A; --ink-soft: #565B78; --ink-mute: #9398B3; --primary: #5D4FA1; --primary-btn: #544898; --primary-soft: #ECEAF6; --secondary: #1F8688; --secondary-soft: #E2F0F0; --grad: linear-gradient(135deg, #6356A8 0%, #218B8B 100%); --line: #E7E9F1; --line-soft: #EFF1F7; --on-dark: #FFFFFF; --on-primary: #FFFFFF; --on-secondary: #FFFFFF; --moment-bg: #262A44; --moment-wave: rgba(33, 139, 139, .55); --mood-1: #6C5EAE; /* Difficult — soft violet */ --mood-2: #6579B4; /* Hard — indigo blue */ --mood-3: #3E8F9A; /* Okay — teal */ --mood-4: #2F9A86; /* Good — sea green */ --mood-5: #C08A4E; /* Strong — warm amber */ } /* ================================================================== Dark mode — calm, "night paper". Applied by app.js via [data-dark] on (set when the user picks Dark, or picks Auto and the OS is dark). Layered OVER the accent theme so purple-teal / daylight keep their identity; only surfaces, ink and depth change. Accents are lifted for legibility on dark, and a contrast-safe --on-primary keeps button text readable. Tested across every screen. ================================================================== */ /* Base dark palette (daylight / coral accent) */ [data-dark] { --bg-1: #12141D; --bg-2: #0C0E15; --surface: #191D28; --surface-2: #212636; --surface-3: #2B3145; --ink: #ECEEF6; --ink-soft: #AAB0C8; --ink-mute: #79809A; --primary: #F0805F; --primary-btn: #EC734D; --primary-soft: #33231D; --secondary: #93A0E0; --secondary-soft: #232741; --grad: linear-gradient(140deg, #F49072 0%, #E2593F 100%); --line: #2A3042; --line-soft: #212636; --on-dark: #FFFFFF; --on-primary: #14141B; /* dark text on the lifted, lighter accent */ --on-secondary: #14141B; --moment-bg: #0A0C12; --moment-wave: rgba(240, 128, 95, .40); --shadow: 0 22px 60px rgba(0, 0, 0, .55); --shadow-sm: 0 4px 18px rgba(0, 0, 0, .38); --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -14px rgba(0, 0, 0, .6); --shadow-glow: 0 24px 70px -22px color-mix(in srgb, var(--primary) 55%, transparent); --mood-1: #8E8AD8; --mood-2: #7E93D4; --mood-3: #56AEBC; --mood-4: #4FBB9F; --mood-5: #E0A96B; } /* Purple-teal accent, dark surfaces */ [data-dark][data-theme="purple-teal"] { --primary: #A79BF0; --primary-btn: #9384E8; --primary-soft: #262340; --secondary: #46C1C3; --secondary-soft: #123138; --grad: linear-gradient(135deg, #9C8FEA 0%, #3FBEC0 100%); --moment-bg: #0C0E1A; --moment-wave: rgba(69, 193, 195, .45); } @media (prefers-color-scheme: dark) { /* No-op: dark is resolved in JS (auto follows the OS) and expressed via [data-dark] above, so an explicit Light choice always wins over the OS. */ }