/* KOVA · Design tokens · v1 production -------------------------------------------------------------- Visual blend: 60 % Linear · 20 % Stripe · 10 % Notion · 10 % Datadog (MONITOR only) Hard constraints: no gold, no luxury serif, no chatbot UX, 8-px grid. This is the only token source. Every component reads from here. -------------------------------------------------------------- */ :root, .kv { /* ============================================================ PALETTE — cool, restrained, accountable ============================================================ */ --bg: #FAFBFC; --bg-2: #F2F4F7; --surface: #FFFFFF; --surface-2: #F7F8FA; --surface-3: #EEF0F3; --line: #E5E7EB; --line-2: #EEF0F3; --line-strong: #D2D6DB; --ink: #0B0D10; /* page headlines, primary text */ --ink-2: #1F2329; /* body */ --ink-3: #3C434C; /* tertiary */ --mute: #6B7280; /* metadata */ --mute-2: #9CA3AF; /* placeholder, disabled label */ /* ACCENT — KOVA blue · used on primary CTA, focus, run links */ --accent: #2E5BFF; --accent-2: #1D4ED8; --accent-3: #1E40AF; --accent-soft: #EEF2FF; --accent-ink: #FFFFFF; /* STATUS — semantic only · never decoration */ --success: #0F7B5B; --success-soft: #E6F4EE; --success-line: #BCE0CE; --warn: #B45309; --warn-soft: #FEF3E2; --warn-line: #F4D9A8; --danger: #B91C1C; --danger-soft: #FEE7E5; --danger-line: #F5BFB8; --info: #1E5E8F; --info-soft: #E6F1F9; --info-line: #BBD7EA; /* MODULE ACCENTS — each module recolors one 2-px stripe + one 6-px dot */ --m-home: #0B0D10; --m-orbit: #1D4ED8; --m-vault: #047857; --m-price: #1E40AF; --m-kraft: #4338CA; --m-approvals: #0F766E; --m-monitor: #475569; --m-connect: #475569; --m-admin: #334155; --m-wiki: #5B6470; /* ============================================================ TYPOGRAPHY — sans only · 8-px line-height rhythm ============================================================ */ --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; /* Size tokens (px) */ --t-display: 32px; --t-h1: 24px; --t-h2: 18px; --t-h3: 15px; --t-body: 14px; --t-body-sm: 13px; --t-meta: 12px; --t-eyebrow: 11px; /* Line-heights (paired) */ --lh-display: 40px; --lh-h1: 32px; --lh-h2: 24px; --lh-h3: 20px; --lh-body: 22px; --lh-body-sm: 20px; --lh-meta: 16px; --lh-eyebrow: 14px; /* Tracking */ --tr-tight: -0.015em; --tr-eyebrow: 0.08em; /* Weights */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ============================================================ SPACING — 8-px grid (4-px allowed only at tier 1 for icons/dots) ============================================================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; /* ============================================================ RADII ============================================================ */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px; /* ============================================================ DEPTH — 5 quiet tiers · no glassmorphism ============================================================ */ --z-0: none; --z-1: 0 1px 2px rgba(11,13,16,0.04), 0 1px 0 rgba(11,13,16,0.02); --z-2: 0 1px 2px rgba(11,13,16,0.04), 0 4px 12px -4px rgba(11,13,16,0.08); --z-3: 0 2px 4px rgba(11,13,16,0.05), 0 12px 24px -8px rgba(11,13,16,0.14); --z-4: 0 4px 8px rgba(11,13,16,0.06), 0 24px 48px -16px rgba(11,13,16,0.22); /* Focus ring — keyboard only */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* ============================================================ MOTION ============================================================ */ --m-1: 80ms; --m-2: 140ms; --m-3: 220ms; --m-4: 360ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-quiet: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ============================================================ LAYOUT ============================================================ */ --rail-w: 224px; --rail-w-min: 64px; --top-h: 52px; --drawer-w: 420px; } /* ============================================================ BASE RESET (scoped to .kv to coexist with anything else) ============================================================ */ .kv { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); background: var(--bg); letter-spacing: -0.003em; font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .kv * { box-sizing: border-box; } .kv :focus { outline: none; } .kv :focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-sm); transition: box-shadow var(--m-1) var(--ease-out); } /* ============================================================ TYPE HELPERS (use sparingly — components own their own type) ============================================================ */ .t-display { font-size: var(--t-display); line-height: var(--lh-display); font-weight: var(--w-semibold); letter-spacing: var(--tr-tight); color: var(--ink); } .t-h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: var(--w-semibold); letter-spacing: var(--tr-tight); color: var(--ink); } .t-h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: var(--w-semibold); color: var(--ink); } .t-h3 { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: var(--w-semibold); color: var(--ink); } .t-body { font-size: var(--t-body); line-height: var(--lh-body); } .t-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-body-sm); color: var(--ink-2); } .t-meta { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--mute); } .t-eyebrow { font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--w-semibold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--mute); } .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .t-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }