/* ═══════════════════════════════════════════════════════════════════════ 9255 W Alameda — Mercury Bold design system v1 Single source of truth for tokens. Imports at the top of every page. Direction picked by Eric on 2026-05-09: - Visual: Mercury Bold (finance-app aesthetic) - Mood: Bold + Trustworthy - Light only (no dark mode) - Brand: Souq Alameda wordmark - Modes: Compact / Guided (user picks via [data-ui-mode] on ) This file deliberately defines only TOKENS. Components live in components.css. Page layouts can layer their own classes but must compose from these tokens (no new colors, no new font sizes outside the scale). ═══════════════════════════════════════════════════════════════════════ */ /* ── Fonts ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Display:wght@600;700;800&family=Geist+Mono:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); /* ── Tokens ─────────────────────────────────────────────────────────── */ :root { /* Type families */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Inter Display', 'Inter', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale — strict 8-step ramp. Use these names everywhere. */ --type-2xs: 11px; /* tag / pill / caption */ --type-xs: 12px; /* secondary helper */ --type-sm: 13px; /* dense table row */ --type-md: 14px; /* body baseline */ --type-lg: 16px; /* large body / KPI label */ --type-xl: 20px; /* section title */ --type-2xl: 26px; /* page title (h1) */ --type-3xl: 34px; /* hero number / display */ /* User-tunable scale (preserves font-prefs.js). Default = 1.10 (Bold reads heavier so we ease back from 1.25 xlarge default). */ --font-scale: 1.10; --type-base: calc(var(--type-md) * var(--font-scale)); /* Surfaces — Mercury-style: white cards on warm-paper page. */ --page: #F9F8F4; /* warm paper, not cool gray */ --surface: #FFFFFF; --surface-soft: #F4F2EB; --surface-inset: #EDEAE0; --surface-pressed:#E5E1D5; /* Ink (text) — high-contrast, deliberate */ --ink-1: #0F1419; /* primary text */ --ink-2: #364150; /* secondary text */ --ink-3: #6B7280; /* tertiary / helper */ --ink-4: #9CA3AF; /* muted / placeholder */ --ink-on-color: #FFFFFF; /* text on solid colored backgrounds */ /* Borders */ --border: rgba(15, 20, 25, 0.10); --border-strong: rgba(15, 20, 25, 0.18); --border-soft: rgba(15, 20, 25, 0.06); --border-focus: #0F1419; /* Brand accent — Mercury-inspired: deep ink-blue */ --accent: #0A2540; --accent-hover: #061B30; --accent-soft: #DDE6F0; /* tint background */ --accent-text: #0A2540; --accent-on: #FFFFFF; /* Semantic colors — restrained Mercury palette (color-blocked KPI tiles use the soft variants; emphasis text uses the strong ones) */ --good: #057A55; --good-soft: #D1FADF; --good-soft-edge: #6EE7B7; --warn: #B45309; --warn-soft: #FEF3C7; --warn-soft-edge: #FCD34D; --bad: #B42318; --bad-soft: #FEE4E2; --bad-soft-edge: #FECACA; --info: #1849A9; --info-soft: #DBEAFE; --info-soft-edge: #BFDBFE; --neutral-soft: #F4F2EB; --neutral-soft-edge: #E5E1D5; /* Mercury Bold uses tinted KPI tiles. These are the canonical 4 tints. */ --tile-revenue-bg: #ECFDF5; --tile-revenue-edge: #6EE7B7; --tile-revenue-ink: #047857; --tile-expense-bg: #FFF7ED; --tile-expense-edge: #FDBA74; --tile-expense-ink: #C2410C; --tile-cash-bg: #EEF2FF; --tile-cash-edge: #A5B4FC; --tile-cash-ink: #3730A3; --tile-neutral-bg: #F4F2EB; --tile-neutral-edge: #D6D3CA; --tile-neutral-ink: #1F2937; /* Spacing — strict 4px ramp. No 7px or 18px or other half-step values anywhere in production CSS. */ --sp-0: 0px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; /* Shadows — Mercury uses essentially borders-only with one accent shadow on hover/raised. Avoid drop-shadow as a default. */ --shadow-1: 0 1px 2px rgba(15, 20, 25, 0.04); --shadow-2: 0 1px 3px rgba(15, 20, 25, 0.06), 0 1px 2px rgba(15, 20, 25, 0.04); --shadow-raised: 0 4px 14px rgba(10, 37, 64, 0.10); /* Motion */ --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --motion-med: 220ms cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --shell-max: 1240px; --content-max: 880px; --nav-height: 56px; } /* ── Density modes ──────────────────────────────────────────────────── */ /* Eric (compact) vs Eva (guided). Set on . */ html[data-ui-mode="compact"] { --font-scale: 0.95; --row-height: 32px; --card-pad: var(--sp-4); --section-gap: var(--sp-4); } html[data-ui-mode="guided"] { --font-scale: 1.15; --row-height: 44px; --card-pad: var(--sp-6); --section-gap: var(--sp-6); } /* Default (no attribute) = guided */ :root { --row-height: 40px; --card-pad: var(--sp-6); --section-gap: var(--sp-5); } /* ── Reset + base ───────────────────────────────────────────────────── */ /* Scoped to so old pages aren't affected when this file is loaded alongside style.css. New / migrated pages add the class. */ .ms-body { margin: 0; font-family: var(--font-sans); font-size: var(--type-base); line-height: 1.55; color: var(--ink-1); background: var(--page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ms-body *, .ms-body *::before, .ms-body *::after { box-sizing: border-box; } input, button, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Material Symbols glyph helper */ .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; user-select: none; vertical-align: -3px; } /* Tabular numerals — apply to anything with currency/counts */ .num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }