/* ========================================================= Soula · Design Tokens --------------------------------------------------------- Single source of truth for the visual language. Import this file first; every other Soula stylesheet relies on these custom properties. ========================================================= */ :root { /* ---------------------------------------------------------- SURFACES — warm-neutral editorial palette bg-stage = page outside the phone; bg-screen = phone interior ---------------------------------------------------------- */ --bg-stage: #EFEDE9; --bg-screen: #FFFFFF; --bg-card-warm: #FBF6F2; /* primary card tint (practice, memory) */ --bg-card-pink: #FFE6EC; /* hero / "why this for you" tint */ --bg-card-rail: #F4EFEA; /* content rail neutral */ --bg-soft: #F5F1ED; /* chip / row resting state */ --bg-soft-hover: #EAE3DC; /* chip hover */ --bg-dark: #0F0F0F; /* segment card, dark surfaces */ --bg-darker: #050505; /* audio player background */ /* ---------------------------------------------------------- INK — warm-neutral greys, not blue-grey. Use for text, icons, borders that need real contrast. ---------------------------------------------------------- */ --ink-1: #0F0F0F; /* primary text + CTAs */ --ink-2: #2A2A2A; /* secondary text */ --ink-3: #6F6A66; /* sub-copy, eyebrow */ --ink-4: #A8A29C; /* tertiary, disabled, dividers */ --ink-on-dark: #FAFAF8; /* text on dark surfaces */ /* ---------------------------------------------------------- BRAND ACCENT — hot pink + orange glow. Drives the orb, segment badges, primary action accent. ---------------------------------------------------------- */ --pink-1: #FF2E6E; /* primary brand hot pink */ --pink-2: #FF5B8C; /* hover / secondary */ --pink-pressed: #E0205C; /* pressed / dark hero */ --pink-soft: #FFD8E2; /* halo, chip tint */ --pink-bg: #FFE6EC; /* background wash */ --pink-glow: #FFB3CC; /* outer orb glow */ --orange-glow: #FF7A5A; /* secondary orb accent */ --orange-warm: #FF8A46; /* "a lot at once" segment */ /* ---------------------------------------------------------- SEGMENT PALETTES — each user segment has 4 stops that drive the orb gradient: hot, glow, soft, halo. hot = magenta / lavender / sage core glow = secondary warm/cool accent soft = pale outer wash halo = outermost large wash ---------------------------------------------------------- */ --seg-mind-hot: #FF1E6E; --seg-mind-glow: #FF6046; --seg-mind-soft: #FFA0B4; --seg-mind-halo: #FFC8D7; --seg-burden-hot: #7B5AD2; --seg-burden-glow: #A582D7; --seg-burden-soft: #C8AFEB; --seg-burden-halo: #DCCDF0; --seg-shift-hot: #3C9178; --seg-shift-glow: #78C8A5; --seg-shift-soft: #B4DCC8; --seg-shift-halo: #C8E6D7; --seg-alot-hot: #FF8A46; --seg-alot-glow: #FFB46E; --seg-alot-soft: #FFD7AF; --seg-alot-halo: #FFE8D9; /* ---------------------------------------------------------- AGENT COLORS — each chat agent has its own orb tint. Use only on .orb-tiny and .voice-orb in chat surfaces. ---------------------------------------------------------- */ --agent-home-hot: #FF1E6E; /* default = mind palette */ --agent-bestie-hot: #FF963C; /* warm peach */ --agent-cbt-hot: #5082E6; /* clinical blue */ --agent-navigator-hot: #3CAA82; /* directional sage */ --agent-righthere-hot: #A06EE6; /* containing lavender */ /* ---------------------------------------------------------- STATUS — emergency / crisis copy only ---------------------------------------------------------- */ --warning: #C7402C; --warning-bg: #FFE3DD; --success: #3C9178; --success-bg: #D6E8E2; /* ---------------------------------------------------------- LINES — hair-thin dividers, prefer over solid borders ---------------------------------------------------------- */ --hair: rgba(15, 15, 15, 0.07); --hair-strong: rgba(15, 15, 15, 0.12); --hair-on-dark: rgba(255, 255, 255, 0.10); /* ---------------------------------------------------------- RADII — chunky soft radii. 999 = pill. The phone shell uses --r-phone. ---------------------------------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; --r-phone: 46px; /* ---------------------------------------------------------- SPACING — 4px base scale. Use these, not raw px. Layout gutters around hero/sections use 22-28px. ---------------------------------------------------------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px; /* Standard horizontal phone padding */ --gutter-screen: 28px; --gutter-chat: 22px; /* ---------------------------------------------------------- TYPE — single family for now. Inter Tight covers display through micro. The --font-editorial alias is kept so any historical usage still resolves; it points at the same sans face. Bring back a true editorial cut later by swapping this one variable. ---------------------------------------------------------- */ --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-editorial: var(--font-sans); /* Type scale — display, step, section, body, micro */ --t-display: 38px; /* hero / first-screen welcome */ --t-step: 30px; /* onboarding step titles */ --t-section: 22px; /* section headers ("Personal practice") */ --t-card-title: 18px; /* practice card, rail title */ --t-body-lg: 16px; /* primary chat bubble */ --t-body: 14px; /* default UI */ --t-body-sm: 13px; /* helper, sub-copy */ --t-meta: 12px; /* meta, helper */ --t-eyebrow: 11px; /* uppercase eyebrows */ --t-micro: 10px; /* timestamps, tag micro labels */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.45; --lh-loose: 1.6; --tracking-eyebrow: 0.22em; --tracking-tag: 0.14em; --tracking-tight: -0.01em; /* ---------------------------------------------------------- MOTION — one base ease + named durations. Use --ease for almost everything (Material-style). ---------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; /* hover, color */ --dur-base: 220ms; /* card lift, fade */ --dur-medium: 350ms; /* sheet, drawer */ --dur-slow: 600ms; /* page transition */ /* Orb organic motion */ --orb-breathe: 6s; --orb-drift: 11s; --orb-halo: 8s; /* ---------------------------------------------------------- SHADOWS — restrained, almost flat. phone = device shadow. card = lift on hover only. ---------------------------------------------------------- */ --shadow-phone: 0 36px 60px -20px rgba(20, 10, 5, 0.18), 0 6px 16px -8px rgba(20, 10, 5, 0.08); --shadow-card: 0 1px 2px rgba(15, 15, 15, 0.04), 0 6px 18px -8px rgba(15, 15, 15, 0.06); --shadow-cta: 0 12px 30px -10px rgba(15, 15, 15, 0.35); --shadow-float: 0 22px 44px -14px rgba(15, 15, 15, 0.22), 0 8px 18px -8px rgba(15, 15, 15, 0.14); --shadow-sheet: 0 -8px 32px rgba(20, 18, 22, 0.18); /* ---------------------------------------------------------- Z-INDEX — only a handful. Keep this small. ---------------------------------------------------------- */ --z-base: 0; --z-sticky: 10; --z-bottom-nav: 20; --z-overlay: 30; --z-modal: 100; /* ---------------------------------------------------------- PHONE FRAME — the standard prototype canvas ---------------------------------------------------------- */ --phone-w: 380px; --phone-h: 800px; } /* ========================================================= Reduced motion — orb animations are decorative only ========================================================= */ @media (prefers-reduced-motion: reduce) { :root { --orb-breathe: 0s; --orb-drift: 0s; --orb-halo: 0s; } }