/* ============================================================ the residency · design tokens v1 single source of truth — mirrors src/design-system/tokens.ts ============================================================ */ :root { /* type */ --font-heading: 'STIX Two Text', 'Times New Roman', Georgia, serif; --font-body: 'Manrope', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* neutrals (zinc) — the editorial foundation */ --neutral-50: #fafafa; --neutral-100: #f4f4f5; --neutral-150: #ececef; --neutral-200: #e5e5e7; --neutral-300: #d4d4d8; --neutral-400: #a1a1aa; --neutral-500: #71717a; --neutral-600: #52525b; --neutral-700: #3f3f46; --neutral-800: #27272a; --neutral-900: #18181b; --neutral-950: #0a0a0c; /* ink — primary contrast & action */ --ink-800: #27272a; --ink-900: #18181b; --ink-950: #0a0a0c; /* surfaces */ --bg-page: #f9f9f9; --bg-surface: #ffffff; --bg-subtle: #f4f4f5; --bg-elevated:#ffffff; --bg-overlay: rgba(20,20,30,0.45); /* sidebar — warm grey canvas, contrasted by the white main panel. Item states sit on top of the warm grey, so hover is a subtle darken and active is a clean white pill. */ --bg-canvas: #dcdcd8; --bg-panel: #ffffff; --bg-sidebar-item-hover: rgba(15,14,14,0.05); --bg-sidebar-item-active: #ffffff; --border-sidebar: #c8c8c4; /* frosted overlays — used by the sticky topbar and the sidebar search trigger. Pair with backdrop-filter: blur(...). */ --bg-frost-strong: rgba(255,255,255,0.95); --bg-frost-soft: rgba(255,255,255,0.55); /* text */ --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #a1a1aa; --text-hint: #d4d4d8; --text-inverse: #ffffff; /* borders */ --border-subtle: #ececef; --border-default: #e5e5e7; --border-strong: #d4d4d8; /* ============================================================ accent palettes — for chips, meta-pills, status, banners all share the same lightness/chroma rhythm so they feel like one family. NEVER mix into long body text. ============================================================ */ /* blue — primary accent (action, info, links) */ --accent-blue-50: #eff6ff; --accent-blue-100: #dbeafe; --accent-blue-200: #bfdbfe; --accent-blue-400: #60a5fa; --accent-blue-500: #3b82f6; --accent-blue-600: #2563eb; --accent-blue-700: #1d4ed8; --accent-blue-900: #1e3a8a; /* green — success, complete, active */ --accent-green-50: #f0fdf4; --accent-green-100: #dcfce7; --accent-green-200: #bbf7d0; --accent-green-400: #4ade80; --accent-green-500: #22c55e; --accent-green-600: #16a34a; --accent-green-700: #15803d; /* amber — warning, pending, weekly */ --accent-amber-50: #fffbeb; --accent-amber-100: #fef3c7; --accent-amber-200: #fde68a; --accent-amber-400: #facc15; --accent-amber-500: #f59e0b; --accent-amber-600: #d97706; --accent-amber-700: #b45309; /* rose — destructive, overdue, errors */ --accent-rose-50: #fff1f2; --accent-rose-100: #ffe4e6; --accent-rose-200: #fecdd3; --accent-rose-400: #fb7185; --accent-rose-500: #f43f5e; --accent-rose-600: #e11d48; --accent-rose-700: #be123c; /* violet — special, premium, scheduled */ --accent-violet-50: #f5f3ff; --accent-violet-100: #ede9fe; --accent-violet-200: #ddd6fe; --accent-violet-400: #a78bfa; --accent-violet-500: #8b5cf6; --accent-violet-600: #7c3aed; --accent-violet-700: #6d28d9; /* indigo — informational secondary */ --accent-indigo-50: #eef2ff; --accent-indigo-100: #e0e7ff; --accent-indigo-200: #c7d2fe; --accent-indigo-400: #818cf8; --accent-indigo-500: #6366f1; --accent-indigo-600: #4f46e5; --accent-indigo-700: #4338ca; /* semantic aliases — use these in components */ --color-success: var(--accent-green-600); --color-warning: var(--accent-amber-600); --color-error: var(--accent-rose-600); --color-info: var(--accent-blue-600); --color-action: var(--ink-900); --color-action-hover: var(--ink-800); /* radius */ --radius-tight: 8px; --radius-default: 12px; --radius-elevated: 16px; --radius-feature: 24px; --radius-pill: 9999px; /* shadows — DELIBERATELY VERY SUBTLE The system reads as paper on paper, not floating UI. If a shadow looks "obvious" in isolation, it's wrong for this system. */ --shadow-none: none; --shadow-sm: 0 1px 1px rgba(20,20,30,0.025); --shadow-md: 0 1px 2px rgba(20,20,30,0.03), 0 2px 4px rgba(20,20,30,0.02); --shadow-card: 0 1px 2px rgba(20,20,30,0.03); --shadow-lg: 0 4px 12px -4px rgba(20,20,30,0.06), 0 1px 2px rgba(20,20,30,0.03); --shadow-pop: 0 8px 24px -8px rgba(20,20,30,0.08), 0 2px 4px rgba(20,20,30,0.03); /* type scale (px) */ --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-lg: 17px; --t-xl: 19px; --t-2xl: 22px; --t-3xl: 28px; --t-4xl: 34px; --t-5xl: 42px; --t-display: clamp(2rem, 7vw, 3.9rem); /* spacing scale (px) — rhythm of 4 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 30px; --s-8: 36px; --s-9: 48px; --s-10: 64px; /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --dur-quick: 0.12s; --dur-default: 0.18s; --dur-slow: 0.35s; } /* ============================================================ dark theme — opt-in via [data-theme="dark"] on . The light defaults above are the canonical values; dark mode overrides only the variables that change. Component CSS doesn't know dark mode exists — it only consumes tokens. ============================================================ */ [data-theme="dark"] { /* surfaces */ --bg-page: #0a0a0c; --bg-surface: #16161a; --bg-subtle: #1f1f23; --bg-elevated:#1f1f23; --bg-overlay: rgba(0,0,0,0.6); /* sidebar */ --bg-canvas: #1a1a1c; --bg-panel: #0f0e0e; --bg-sidebar-item-hover: rgba(255,255,255,0.05); --bg-sidebar-item-active: #27272a; /* frosted overlays — match the dark panel */ --bg-frost-strong: rgba(15,14,14,0.85); --bg-frost-soft: rgba(255,255,255,0.04); /* text */ --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; --text-hint: #3f3f46; --text-inverse: #0f0e0e; /* borders — translucent so they sit cleanly on any dark surface */ --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.16); --border-sidebar: rgba(255,255,255,0.10); /* neutrals — only the lightest stops flip; 300+ stay so dot/ink usages remain stable */ --neutral-100: #1a1a1d; --neutral-150: #1f1f23; --neutral-200: #27272a; /* primary action — light pill on dark canvas, hover one shade darker */ --color-action: #fafafa; --color-action-hover: #e5e5e7; /* accent palettes — only the chip-background stops (50, 100) and the chip-text stop (700) flip. The 400/500/600 dot/border ramps stay intact so dots, primary action variants, and focus rings are unchanged. */ --accent-blue-50: rgba(59,130,246,0.14); --accent-blue-100: rgba(59,130,246,0.26); --accent-blue-700: #93c5fd; --accent-green-50: rgba(34,197,94,0.14); --accent-green-100: rgba(34,197,94,0.26); --accent-green-700: #86efac; --accent-amber-50: rgba(245,158,11,0.14); --accent-amber-100: rgba(245,158,11,0.28); --accent-amber-700: #fcd34d; --accent-rose-50: rgba(244,63,94,0.14); --accent-rose-100: rgba(244,63,94,0.26); --accent-rose-700: #fda4af; --accent-violet-50: rgba(139,92,246,0.16); --accent-violet-100: rgba(139,92,246,0.28); --accent-violet-700: #c4b5fd; --accent-indigo-50: rgba(99,102,241,0.16); --accent-indigo-100: rgba(99,102,241,0.28); --accent-indigo-700: #a5b4fc; /* shadows — flatter on dark; rgba black still works because everything else got darker */ --shadow-sm: 0 1px 1px rgba(0,0,0,0.4); --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --shadow-card: 0 1px 2px rgba(0,0,0,0.4); --shadow-lg: 0 4px 12px -4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-pop: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4); } /* tell the browser which mode native widgets (scrollbars, form controls, etc.) should render in. JS sets data-theme on . */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; }