| /* ========================================================================= | |
| tokens.css — the dreamy cloudscape design system | |
| 6 warm-pink dawn colors, soft rounded type, fluid scale. | |
| Every color is tinted warm — no pure #000 or #fff anywhere. | |
| ========================================================================= */ | |
| :root { | |
| /* --- Sky gradient stops (top → bottom of the dawn sky) --- */ | |
| --sky-top: #E8E0FF; /* soft lavender, top of sky */ | |
| --sky-mid: #FFD6E8; /* blush pink, mid sky */ | |
| --sky-bottom: #FFE5D9; /* warm peach, horizon */ | |
| /* --- Scene elements --- */ | |
| --cloud: #FFF5F8; /* warm cloud white (pink-tinted) */ | |
| --cloud-soft: #FFEFF4; /* deeper cloud shadow */ | |
| --whale: #9DAAF2; /* periwinkle, the creature */ | |
| --whale-belly: #C5CCF7; /* lighter whale belly highlight */ | |
| /* --- Ink + accent --- */ | |
| --ink: #3D2C4E; /* plum-charcoal, all body text */ | |
| --ink-soft: #6B5A7E; /* muted plum, secondary text */ | |
| --rose: #FF8FAB; /* primary accent (CTAs, glow) */ | |
| --rose-deep: #E86F92; /* hover state for rose */ | |
| /* --- Translucent surfaces --- */ | |
| --panel: rgba(255, 245, 248, 0.72); /* frosted cloud card */ | |
| --panel-border: rgba(255, 143, 171, 0.22); | |
| /* --- Type families (rounded, friendly, dreamy) --- */ | |
| --font-display: 'Comfortaa', system-ui, -apple-system, sans-serif; | |
| --font-body: 'Nunito', system-ui, -apple-system, sans-serif; | |
| /* --- Fluid type scale --- */ | |
| --step-hero: clamp(2.75rem, 6.5vw, 5.25rem); | |
| --step-h2: clamp(1.9rem, 3.6vw, 2.85rem); | |
| --step-h3: clamp(1.25rem, 2vw, 1.6rem); | |
| --step-body: 1.0625rem; | |
| --step-small: 0.875rem; | |
| --step-mono: 0.8125rem; | |
| /* --- Layout --- */ | |
| --maxw: 1180px; | |
| --gut: clamp(1.25rem, 4vw, 2.5rem); | |
| --radius-pill: 999px; | |
| --radius-card: 22px; | |
| /* --- Motion --- */ | |
| --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* primary ease-out */ | |
| --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1); /* material standard */ | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot / pop */ | |
| --ease-flow: cubic-bezier(0.65, 0, 0.35, 1); /* in-out, cinematic */ | |
| --dur-fast: 0.18s; | |
| --dur: 0.4s; | |
| --dur-slow: 0.7s; | |
| --dur-cinema: 1s; | |
| /* --- Spacing scale (macro-whitespace friendly) --- */ | |
| --space-section: clamp(4rem, 10vw, 8rem); | |
| } | |