/* ========================================================= Mappd Design Tokens White core. Warm. Premium. Liquid glass. ========================================================= */ @import url('https://fonts.bunny.net/css2?family=Geist:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---------- Color: Surface (warm whites) ---------- */ --bg-0: #FAFAF7; /* page substrate — warm off-white */ --bg-1: #F4EFE8; /* gradient end / subtle deeper warm */ --bg-2: #FFFFFF; /* cards, elevated surfaces */ --bg-tint: #FFF8F2; /* faint ember-tinted surface */ /* ---------- Color: Foreground (warm near-blacks) ---------- */ --fg-0: #0E0C0A; /* display headings */ --fg-1: #1A1714; /* primary body */ --fg-2: #4A413A; /* secondary text */ --fg-3: #8A7F75; /* tertiary, captions */ --fg-4: #C9C0B5; /* disabled, hairlines on color */ /* ---------- Color: Lines ---------- */ --line-1: rgba(20, 18, 15, 0.08); /* default hairline */ --line-2: rgba(20, 18, 15, 0.14); /* emphasized hairline */ --line-glass-outer: rgba(255, 255, 255, 0.6); --line-glass-inner: rgba(20, 18, 15, 0.06); /* ---------- Color: Brand accent (Ember) ---------- */ --ember-50: #FFF1EA; --ember-100: #FFD9C5; --ember-300: #FFA47B; --ember-500: #FF6A3D; /* primary brand */ --ember-600: #E5512A; --ember-700: #B33A1B; /* ---------- Color: Semantic ---------- */ --success-500: #2C9F6F; --success-50: #E8F5EE; --warning-500: #D9A227; --warning-50: #FBF3DC; --danger-500: #D04A3A; --danger-50: #FBE9E5; --info-500: #3D7AFF; --info-50: #E8EFFE; /* ---------- Glass spectrum (gradient stops) ---------- */ --spec-orange: #FF7A3D; --spec-magenta: #E84CB4; --spec-indigo: #5A4CFF; --spec-cyan: #36C9E8; --spec-lime: #6BD46A; --gradient-spectrum: linear-gradient(135deg, var(--spec-orange) 0%, var(--spec-magenta) 35%, var(--spec-indigo) 70%, var(--spec-cyan) 100%); --gradient-ember: linear-gradient(135deg, #FF8A55 0%, #FF6A3D 60%, #E5512A 100%); --gradient-page: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%); /* ---------- Spacing (4px scale) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-20: 80px; --space-30: 120px; /* ---------- Radii ---------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* ---------- Shadows (warm, ember-tinted black) ---------- */ --shadow-1: 0 1px 2px rgba(58, 33, 20, 0.06), 0 1px 1px rgba(58, 33, 20, 0.04); --shadow-2: 0 4px 12px rgba(58, 33, 20, 0.08), 0 1px 2px rgba(58, 33, 20, 0.05); --shadow-3: 0 18px 40px rgba(58, 33, 20, 0.12), 0 2px 6px rgba(58, 33, 20, 0.06); --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(255,255,255,0.4), 0 12px 32px rgba(58, 33, 20, 0.10); --shadow-focus: 0 0 0 4px rgba(255, 106, 61, 0.22); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.6, 0.0, 0.8, 0.4); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 320ms; /* ---------- Type families ---------- */ --font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Type scale (semantic) ---------- */ --text-display: 800 72px/1.04 var(--font-sans); --text-h1: 700 48px/1.08 var(--font-sans); --text-h2: 700 36px/1.12 var(--font-sans); --text-h3: 600 24px/1.25 var(--font-sans); --text-h4: 600 18px/1.35 var(--font-sans); --text-lead: 400 20px/1.5 var(--font-sans); --text-body: 400 16px/1.55 var(--font-sans); --text-small: 400 14px/1.5 var(--font-sans); --text-caption: 500 12px/1.4 var(--font-sans); --text-mono: 500 13px/1.45 var(--font-mono); --tracking-display: -0.03em; --tracking-h: -0.02em; --tracking-body: 0em; --tracking-caps: 0.08em; } /* ========================================================= Semantic element defaults ========================================================= */ html, body { background: var(--gradient-page); background-attachment: fixed; color: var(--fg-1); font: var(--text-body); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { font: var(--text-h1); letter-spacing: var(--tracking-h); color: var(--fg-0); margin: 0; text-wrap: pretty; } h2, .h2 { font: var(--text-h2); letter-spacing: var(--tracking-h); color: var(--fg-0); margin: 0; text-wrap: pretty; } h3, .h3 { font: var(--text-h3); letter-spacing: var(--tracking-h); color: var(--fg-0); margin: 0; } h4, .h4 { font: var(--text-h4); color: var(--fg-0); margin: 0; } .display { font: var(--text-display); letter-spacing: var(--tracking-display); color: var(--fg-0); } .lead { font: var(--text-lead); color: var(--fg-2); } p { margin: 0; } .small { font: var(--text-small); color: var(--fg-2); } .caption { font: var(--text-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); } code, .mono { font: var(--text-mono); } a { color: var(--ember-600); text-decoration: none; transition: opacity var(--duration-fast) var(--ease-out); } a:hover { opacity: 0.78; } ::selection { background: var(--ember-100); color: var(--ember-700); } /* ========================================================= Liquid-glass utility ========================================================= */ .glass { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--line-glass-outer); box-shadow: var(--shadow-glass); border-radius: var(--radius-lg); }