/* ============================================================================ SM DESIGN TOKENS · single source of truth · 2026 platform rebuild ---------------------------------------------------------------------------- Loaded LAST so its :root definitions win for any duplicated variable names and unify the three legacy theme layers (main / theme / premium). CSS custom properties resolve per-element at compute time, so earlier stylesheets may freely use the --sp / --fs / brand tokens defined here. ============================================================================ */ :root{ /* ---- Typeface (one family, real weights, loaded in ) ------------- */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-head: var(--font); --font-body: var(--font); /* ---- Type scale (Display → Caption) ----------------------------------- */ --fs-display: clamp(34px, 6vw, 60px); --fs-h1: clamp(28px, 4.6vw, 44px); --fs-h2: clamp(23px, 3.2vw, 32px); --fs-h3: 21px; --fs-h4: 17px; --fs-body-lg: 17px; --fs-body: 15px; --fs-sm: 13px; --fs-caption: 11.5px; --lh-tight: 1.06; --lh-snug: 1.25; --lh-normal: 1.55; --ls-tight: -0.02em; --ls-wide: 0.04em; --ls-caps: 0.12em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ---- 8pt spacing scale ------------------------------------------------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- Radius scale ------------------------------------------------------ */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* ---- Elevation --------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(8,40,30,.08), 0 1px 3px rgba(8,40,30,.06); --shadow-2: 0 6px 18px rgba(8,66,50,.10); --shadow-3: 0 14px 38px rgba(8,66,50,.16); --shadow-4: 0 28px 64px rgba(8,40,30,.22); /* ====================================================================== * * BRAND PALETTE — canonical ramps (replace the 3 hardcoded gold hexes) * * ====================================================================== */ --gold-50: #fbf3d6; --gold-100: #f6e7ad; --gold-200: #efd479; --gold-300: #e8c84b; --gold-400: #d8b339; --gold-500: #caa028; --gold-600: #a9851d; --gold-700: #856611; --em-50: #e7f5ee; --em-100: #c6e8d8; --em-200: #93d4b6; --em-300: #4fb487; --em-400: #0e8a5f; --em-500: #0b6e4f; --em-600: #095941; --em-700: #0c3b2e; --em-900: #08231b; --ivory: #fbfaf5; --ivory-2: #f3f1e8; /* Semantic status (all ≥ 4.5:1 on white) */ --c-success: #1a9d4d; --c-warning: #b9770a; --c-error: #d23c41; --c-info: #0a7f7a; /* ---- Deterministic unification of legacy aliases ---------------------- (these names are used across templates; pin them to the canonical ramp) */ --gold: var(--gold-500); --gold-a: var(--gold-300); --gold-b: var(--gold-600); --grad-gold: linear-gradient(135deg, #f5e07a 0%, var(--gold-300) 45%, var(--gold-500) 100%); --royal: var(--em-500); --em: var(--em-500); /* ---- Light surface tokens (default theme) ------------------------------ */ --surface-0: #ffffff; /* cards / sheets */ --surface-1: #f4faf6; /* page background */ --surface-2: #e7f5ee; /* sunken / hover */ --hairline: #d3e7dd; /* borders */ --text-1: #102a23; /* primary copy */ --text-2: #3f6157; /* secondary copy */ --text-3: #6a8a7e; /* tertiary / captions */ --focus: #0e8a5f; /* focus ring */ } /* ====================================================================== * * DARK THEME · opt-in via (toggle: phase 2) * * Surfaces only — brand ramps stay constant for identity consistency. * * ====================================================================== */ [data-theme="dark"]{ --surface-0: #0f2b22; --surface-1: #0a201a; --surface-2: #123a2d; --hairline: #1d4438; --text-1: #eafff7; --text-2: #a9cdc0; --text-3: #7fae9d; --shadow-2: 0 6px 18px rgba(0,0,0,.45); --shadow-3: 0 14px 38px rgba(0,0,0,.55); } /* ---- Global typographic + box reset on top of the token layer ---------- */ body{ font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Form controls don't inherit font-family by default → route them to Inter too */ button, input, select, textarea{ font-family: inherit; } /* Kill stray horizontal scroll site-wide (decorative blur layers overflowed) */ html, body{ overflow-x: clip; max-width: 100%; } /* Reusable utility primitives (opt-in, additive) */ .u-stack > * + *{ margin-top: var(--sp-4); } .u-caps{ text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-caption); font-weight: var(--fw-black); } .u-muted{ color: var(--text-2); } /* ============================================================ * * DARK THEME · (toggle in sidebar) * Legacy + token vars flipped under body.sky. Form fields and the * few inline-white surfaces are forced dark so migrated text reads. * ============================================================ */ :root{ --em-link:#075e43; } [data-theme="dark"] body{ background:#07201a; } [data-theme="dark"] body.sky{ --ink:#eafff7; --ink2:#a9cdc0; --ink3:#7fae9d; --em-link:#7fd3b3; --em-deep:#7fd3b3; --glass-bg:rgba(17,42,33,.66); --glass-brd:rgba(255,255,255,.10); --glass-shadow:0 18px 48px rgba(0,0,0,.5); --soft-shadow:0 10px 30px rgba(0,0,0,.42); --em-line:rgba(127,211,179,.16); --hairline:#1d4438; --surface-0:#10261e; --surface-1:#0a201a; --surface-2:#123a2d; --text-1:#eafff7; --text-2:#a9cdc0; --text-3:#7fae9d; background:#07201a; } [data-theme="dark"] body.sky::before{ opacity:.5; } /* force inline-white form fields dark so the migrated (now-light) text reads */ [data-theme="dark"] body.sky input, [data-theme="dark"] body.sky textarea, [data-theme="dark"] body.sky select{ background:#10261e !important; color:var(--ink) !important; border-color:var(--hairline) !important; } [data-theme="dark"] body.sky input::placeholder, [data-theme="dark"] body.sky textarea::placeholder{ color:#6f9485 !important; } /* tbar (mobile top bar) goes dark */ [data-theme="dark"] .tbar{ background:rgba(10,32,26,.86); border-bottom-color:var(--hairline); } [data-theme="dark"] .app-bottomnav{ background:rgba(10,32,26,.92) !important; border-color:rgba(255,255,255,.08) !important; } /* theme toggle (lives in the sidebar footer) */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#dff3ea; border-radius:13px; padding:11px; cursor:pointer; font:700 13px var(--font); transition:background .16s ease; } .theme-toggle:hover{ background:rgba(255,255,255,.15); } .theme-toggle .ic{ flex:none; } .theme-toggle .tt-sun{ display:none; } [data-theme="dark"] .theme-toggle .tt-moon{ display:none; } [data-theme="dark"] .theme-toggle .tt-sun{ display:inline-flex; } /* ---- Headline wrapping: balance short headings, de-orphan body copy ---- */ h1, h2, h3, h4, .hero2-title, .home-h2, .home-cta h2, .section-title, .sct-title, .chat-title, .pf-name, .dash-h1{ text-wrap: balance; } p, .hero2-sub, .home-sub, .section-sub{ text-wrap: pretty; }