/* =========================================================================== tokens.css — design system, single source of truth. Direction (locked): light, colourful, playful, authentic, Beten-iconic. =========================================================================== */ :root { /* --- Base --- */ --paper: #FFFCF4; /* light app background */ --bg: #FFFCF4; /* alias (legacy) */ --card: #FFFFFF; --ink: #2C2A38; /* primary text */ --muted: #7C7A86; /* secondary text */ --line: #ECE7DB; /* hairline borders */ /* --- Brand + playful palette (lots of colour) --- */ --coral: #FF6B5E; --coral-d: #E2483C; /* primary action */ --yellow: #FFC24B; --yellow-d: #E7A52F; --teal: #23B3A6; --teal-d: #1B8E84; --blue: #5B8DEF; --blue-d: #3E6FD0; --green: #54B96E; --green-d: #3E9A57; --purple: #9A7BE8; --purple-d: #6E51C4; --pink: #FF93B3; --pink-d: #E86F95; --orange: #F2913E; --orange-d: #D5762A; /* Beten */ /* --- Energy colour rotation (stable by index) — bright + varied --- */ --e0: #FF6B5E; /* coral */ --e1: #FFC24B; /* yellow */ --e2: #23B3A6; /* teal */ --e3: #5B8DEF; /* blue */ --e4: #9A7BE8; /* purple */ --e5: #54B96E; /* green */ /* --- Type --- (playful, rounded) --- */ --font-disp: "Baloo 2", system-ui, sans-serif; /* Latin wordmark */ --font-he: "Varela Round", system-ui, sans-serif; /* Hebrew display + CTA */ --font-head: var(--font-he); /* alias */ --font-body: "Heebo", system-ui, sans-serif; /* body / UI */ --t-display: 54px; --t-title: 32px; --t-lead: 18px; --t-body: 16px; --t-small: 14px; --t-tiny: 13px; /* --- Radius (rounded, friendly) --- */ --r-card: 22px; --r-btn: 18px; --r-chip: 14px; --r-pill: 999px; /* --- Shadow (soft + playful hard-offset for buttons) --- */ --shadow-card: 0 6px 18px rgba(44, 42, 56, .08); --shadow-pop: 0 10px 30px rgba(44, 42, 56, .16); /* --- Spacing --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* --- Layout --- */ --app-max: 440px; --ease: cubic-bezier(.34, 1.2, .44, 1); /* slight overshoot = playful */ /* --- Semantic surfaces (themeable — overridden in [data-theme="dark"]) --- Components use these instead of hardcoded #fff so dark mode adapts cleanly. */ --surface: #FFFFFF; /* cards, inputs, pills sitting on paper */ --surface-2: #FBF7EC; /* warm inset (locked row, bond row) */ --mix-base: #FFFFFF; /* base that energy colours tint into (color-mix) */ --paper-blur: rgba(255, 252, 244, .92); /* frosted nav / sticky headers */ --why-bg: #FFF4E9; /* Beten "why" pill background (text stays --orange-d) */ --field-bad: #FFF4F2; /* invalid input background */ --flag-red-bg: #FFE9E6; --flag-red-line: #FFD2CC; --flag-green-bg: #E6F6EC; --flag-green-line: #CDEAD6; } /* =========================================================================== Dark theme — set on by js/core/theme.js (and the pre-paint boot script in app.html). Brand accent colours are kept; only the neutral surfaces, text and shadows flip. Keep contrast high — never muddy. =========================================================================== */ [data-theme="dark"] { --paper: #15141C; --bg: #15141C; --card: #201F29; --ink: #F3F0E8; --muted: #9D9AA8; --line: #322F3D; --surface: #201F29; --surface-2: #272530; --mix-base: #272530; --paper-blur: rgba(21, 20, 28, .92); --why-bg: #38291B; --field-bad: #3A211E; --flag-red-bg: #38211E; --flag-red-line: #573029; --flag-green-bg: #1D3326; --flag-green-line: #2C4A38; --shadow-card: 0 6px 18px rgba(0, 0, 0, .45); --shadow-pop: 0 12px 34px rgba(0, 0, 0, .6); }