/* ========================================================= Forage.Design — Design Tokens Colors, typography, spacing, motion ========================================================= */ /* Web fonts — DM Sans, DM Serif Display, DM Serif Text Loaded via in index.html , not @import (avoids a render-blocking chain of serial requests). */ :root { /* -------------------------------------------------- PALETTE -------------------------------------------------- */ /* Brand */ --forage-mud: #3e7176; --forage-slate: #42565a; --forage-black: #2a2b2c; /* Accents — used sparingly */ --forage-lime: #e2fb45; --forage-orange: #eca153; --forage-rose: #cc8978; --forage-burgundy: #763e3e; /* Neutrals */ --forage-white: #ffffff; --forage-bone: #f6f6f5; --forage-fog: #ededed; /* Mud tints */ --forage-mud-12: rgba(62, 113, 118, 0.12); --forage-mud-soft: #d8e3e4; --forage-mud-deep: #2c5256; /* -------------------------------------------------- SEMANTIC TOKENS -------------------------------------------------- */ /* Foreground */ --fg-1: var(--forage-black); --fg-2: var(--forage-slate); --fg-3: #6b7d80; --fg-on-mud: var(--forage-bone); --fg-link: var(--forage-mud); --fg-link-hover: var(--forage-mud-deep); /* Background */ --bg-canvas: var(--forage-bone); --bg-elev-1: var(--forage-white); --bg-elev-2: var(--forage-fog); --bg-mud: var(--forage-mud); --bg-slate: var(--forage-slate); --bg-ink: var(--forage-black); /* Borders */ --border-1: rgba(42, 43, 44, 0.10); --border-2: rgba(42, 43, 44, 0.18); --border-on-dark: rgba(246, 246, 245, 0.16); /* -------------------------------------------------- TYPOGRAPHY -------------------------------------------------- */ --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif-display: 'DM Serif Display', 'Iowan Old Style', Georgia, serif; --font-serif-text: 'DM Serif Text', 'Iowan Old Style', Georgia, serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Scale */ --fs-display-xl: clamp(56px, 7vw, 96px); --fs-display-lg: clamp(44px, 5.5vw, 72px); --fs-display-md: clamp(36px, 4vw, 56px); --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-eyebrow: 12px; /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.6; /* Letter spacing */ --ls-display: -0.02em; --ls-tight: -0.01em; --ls-normal: 0em; --ls-eyebrow: 0.16em; /* -------------------------------------------------- SHAPE & SPACING -------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(42, 43, 44, 0.06), 0 1px 1px rgba(42, 43, 44, 0.04); --shadow-2: 0 4px 12px rgba(42, 43, 44, 0.08), 0 1px 2px rgba(42, 43, 44, 0.04); --shadow-3: 0 12px 32px rgba(42, 43, 44, 0.12), 0 2px 6px rgba(42, 43, 44, 0.06); --shadow-mud: 0 12px 32px rgba(62, 113, 118, 0.18); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Motion */ --ease-soft: cubic-bezier(0.32, 0.72, 0.30, 1); --ease-out: cubic-bezier(0.20, 0.80, 0.20, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; } /* Selection */ ::selection { background: var(--forage-mud); color: var(--forage-bone); }