/* tiredapi.co — design tokens Mirrors tired-events-design-system/project/styles/colors_and_type.css so the brand reads as one network. Adjusted accent toward cyan-magenta for a developer-tool feel; falls back to the consumer purple if you set [data-theme="midnight"] on . The parallel session on tired.events is authoring _design-tokens.css + _dynamic-island.css + tired-direction-follow.js — once those land, swap this file's @import for them. The class hooks below are stable. */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* type */ --font-display: 'Instrument Serif', 'Times New Roman', serif; --font-body: 'Geist', -apple-system, system-ui, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace; /* color — neon, darker than consumer */ --bg: #07060F; --bg-elev: #11102B; --bg-elev-2: #1A1840; --paper: #F3EDFF; --ink: #F3EDFF; --ink-dim: rgba(243, 237, 255, 0.66); --ink-faint: rgba(243, 237, 255, 0.38); --line: rgba(199, 163, 255, 0.14); --line-strong: rgba(199, 163, 255, 0.30); --accent-h: 295; --accent: oklch(0.74 0.27 var(--accent-h)); --accent-dim: oklch(0.74 0.27 var(--accent-h) / 0.22); --accent-2: oklch(0.80 0.20 calc(var(--accent-h) + 50)); --accent-glow: oklch(0.74 0.27 var(--accent-h) / 0.55); --success: oklch(0.78 0.14 150); --warn: oklch(0.78 0.16 80); --danger: oklch(0.62 0.20 25); /* radii */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; /* elevation */ --shadow-1: 0 1px 2px rgba(0,0,0,0.30); --shadow-2: 0 8px 24px rgba(0,0,0,0.35); --shadow-3: 0 24px 60px rgba(0,0,0,0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } input, textarea, select { font-family: inherit; color: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; } ::-webkit-scrollbar-track { background: transparent; } /* ── type classes ── */ .display-xl { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 7vw, 112px); line-height: 0.92; letter-spacing: -0.02em; } .display-l { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.5vw, 64px); line-height: 0.95; letter-spacing: -0.01em; } .display-m { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.00; letter-spacing: -0.01em; } .italic { font-style: italic; } .h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.10; } .h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; } .h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.20; } .body { font-size: 15px; line-height: 1.55; color: var(--ink); } .body-dim { font-size: 15px; line-height: 1.55; color: var(--ink-dim); } .small { font-size: 13px; color: var(--ink-dim); } .tiny { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.02em; } .label-mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }