/* ============================================================ MAI DESIGN SYSTEM — tokens.css Brand & UI tokens reconstructed from https://www.mai.co • Display: KMR Waldenburg (local woff2) • Body: Inter (Google Fonts, loaded in ) These are the *base* tokens. Theme-specific surface/ink vars (light vs. dark) are layered on top in styles.css. ============================================================ */ @font-face { font-family: "KMR Waldenburg"; src: url("fonts/KMRWaldenburg-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "KMR Waldenburg"; src: url("fonts/KMRWaldenburg-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "KMR Waldenburg"; src: url("fonts/KMRWaldenburg-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "KMR Waldenburg"; src: url("fonts/KMRWaldenburg-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---------- Type families ---------- */ --font-display: "KMR Waldenburg", "Helvetica Neue", Arial, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* ---------- Base palette ---------- */ --white: #FFFFFF; --black: #000000; --ink: #1C1C1C; /* foreground / primary button bg */ --gray-600: #6E6E6E; /* most-used body gray */ --gray-500: #8E8E8E; /* captions */ --gray-400: #A3A3A3; /* disabled */ /* dark surfaces */ --bg-dark: #1A1A1A; --bg-dark-2: #1C1C1C; --bg-dark-3: #141414; /* ---------- Accents ---------- */ --accent: #3C5FFF; /* electric blue — links, focus, highlight */ --accent-soft: #95A8FF; --accent-tint: #A5B4FC; --accent-bright: #5A78FF; /* slightly lifted blue for dark mode */ /* "Three experts" persona accents */ --persona-scientist: #519A73; /* green */ --persona-strategist: #7D5D9A; /* purple */ --persona-ops: #417091; /* blue */ --persona-gold: #BB9846; /* gold */ /* status */ --amber: #C8841C; --green: #519A73; --red: #D6453C; /* heading gradient (mai.co hero second line) */ --grad-heading: linear-gradient(180deg, #464646 0%, #8E8E8E 100%); /* ---------- Radii ---------- */ --radius-xs: 6px; --radius-sm: 9px; /* buttons */ --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* large cards */ --radius-2xl: 32px; --radius-pill: 9999px; /* ---------- Spacing (4px base) ---------- */ --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-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; /* ---------- Shadows (soft, neutral) ---------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 32px rgba(0,0,0,0.10); --shadow-xl: 0 24px 60px rgba(0,0,0,0.12); /* ---------- Motion ---------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-reveal: 1000ms; /* type scale */ --fs-main: 17px; --lh-body: 1.55; --ls-display: -0.02em; }