/* tokens.css — design tokens (implementation-plan §3) Brand-constant tokens + per-app override hooks. Per-app pages override --accent / --accent-contrast inline on . */ :root { /* ---- Brand-constant palette ---- */ --color-bg: #ffffff; --color-fg: #14151a; --color-muted: #5b6170; --color-surface: #f6f7f9; --color-surface-2: #eef0f4; --color-border: #e5e7eb; /* ---- Per-app override defaults (overridden inline on app pages) ---- */ --accent: #2b6cf0; --accent-contrast: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 12%, #ffffff); --accent-hover: color-mix(in srgb, var(--accent) 88%, #000000); /* ---- Type ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.1rem; --step-4: 2.8rem; --step-5: 3.6rem; --leading-tight: 1.15; --leading-normal: 1.6; /* ---- Spacing ---- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; /* ---- Shape ---- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-1: 0 1px 3px rgba(20, 21, 26, 0.08), 0 1px 2px rgba(20, 21, 26, 0.04); --shadow-2: 0 8px 24px rgba(20, 21, 26, 0.10); /* ---- Layout ---- */ --container: 1140px; --container-narrow: 760px; --header-h: 64px; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 180ms; } @media (prefers-color-scheme: dark) { :root { --color-bg: #0f1115; --color-fg: #f3f4f6; --color-muted: #a0a6b4; --color-surface: #181b21; --color-surface-2: #20242c; --color-border: #2a2f38; --accent-soft: color-mix(in srgb, var(--accent) 22%, #0f1115); } }