/* ========================================================================== JSense design tokens Values measured from the Figma exports (750x1624 = 375x812 @2x). Light is the default; dark is applied via [data-theme="dark"] on . ========================================================================== */ :root { /* ---- Brand / accent ------------------------------------------------ */ --accent: #0080FF; --accent-strong: #0068D6; --accent-soft: #D9ECFF; --accent-softer: #E4F2FF; /* ---- Surfaces ------------------------------------------------------ */ --bg: #F9FCFE; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-sunken: #F1F6FB; --bubble-user: #FFFFFF; --bubble-bot: #FFFFFF; --input-bg: #FFFFFF; --chip-bg: #FFFFFF; /* ---- Text ---------------------------------------------------------- */ --text: #0A1330; --text-muted: #46536F; --text-subtle: #8A97AE; --text-on-accent: #FFFFFF; --text-placeholder: #A8B3C4; /* ---- Lines --------------------------------------------------------- */ --border: rgba(10, 19, 48, 0.07); --border-strong: rgba(10, 19, 48, 0.12); --divider: rgba(10, 19, 48, 0.06); /* ---- Elevation ----------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(16, 33, 71, 0.05); --shadow-card: 0 4px 16px rgba(16, 33, 71, 0.06); --shadow-pill: 0 4px 14px rgba(16, 33, 71, 0.08); --shadow-modal: 0 24px 60px rgba(9, 20, 48, 0.22); /* Backdrop behind the blurred modal state */ --scrim: rgba(240, 246, 252, 0.55); /* ---- Typography ---------------------------------------------------- */ --font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-display: 2rem; /* 32 - splash wordmark */ --fs-h1: 1.52rem; /* 24.3 - "Hi, Abdul" (measured string width: 96.5px) */ --fs-h2: 1.61rem; /* 25.8 - "JSense" wordmark (measured: 87.5px) */ --fs-h3: 0.81rem; /* 13 - section titles e.g. "Popular Questions" */ --fs-label: 0.63rem; /* 10 - "Smart Chat", tile captions */ --fs-body: 1rem; /* 16 */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.75rem; /* 12 */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Space (4pt scale) --------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* ---- Radii --------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px; /* ---- Layout -------------------------------------------------------- */ --app-max: 430px; /* phone width ceiling on desktop */ /* Fluid: eases down on very narrow viewports (<320px embedded webviews, foldables) instead of eating a fixed 40px off whatever width exists. */ --gutter: clamp(0.875rem, 4vw, 1.25rem); --header-h: 44px; --composer-h: 76px; /* ---- Motion -------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 380ms; color-scheme: light; } /* ========================================================================== Dark ========================================================================== */ [data-theme="dark"] { --accent: #2E90FF; --accent-strong: #57A8FF; --accent-soft: rgba(46, 144, 255, 0.16); --accent-softer: rgba(46, 144, 255, 0.10); --bg: #031335; --bg-elevated: #0E2150; --surface: #0E2150; --surface-2: #112557; --surface-sunken: #081238; --bubble-user: #0D2150; --bubble-bot: #112557; --input-bg: #081238; --chip-bg: #0E2150; --text: #F2F6FF; --text-muted: #B9C7E4; --text-subtle: #7D8DB3; --text-on-accent: #FFFFFF; --text-placeholder: #7286AD; --border: rgba(46, 76, 162, 0.55); --border-strong: #2E4CA2; --divider: rgba(46, 76, 162, 0.40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.32); --shadow-pill: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55); --scrim: rgba(3, 12, 34, 0.62); color-scheme: dark; } /* Respect the OS preference before a choice is stored. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } }