/* ========================================================= KUBLE DESIGN SYSTEM — TOKENS Dark-first, editorial, AI-forward. Derived from Kuble key visuals (deep night blue + cool steel blue accents, warm amber as secondary, editorial type pairing). ========================================================= */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap"); /* ---------- MONTSERRAT — Brand Sans (self-hosted, variable) ---------- */ @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ---------- BRAND ---------- */ /* Neutral ladder — deep night, not pure black. */ --kbl-ink-1000: #05070C; /* deepest ink, page bg */ --kbl-ink-950: #0A0E17; /* app surface */ --kbl-ink-900: #10141F; /* card */ --kbl-ink-800: #161B28; /* raised card */ --kbl-ink-700: #1E2535; /* hover / input */ --kbl-ink-600: #2A3246; /* border strong */ --kbl-ink-500: #3C465C; /* border */ --kbl-ink-400: #5A6479; /* muted text */ --kbl-ink-300: #8892A6; /* secondary text */ --kbl-ink-200: #B4BCCC; /* tertiary / caption on dark */ --kbl-ink-100: #DCE1EB; /* near-white on dark */ --kbl-ink-50: #F2F4F8; /* off-white */ --kbl-ink-0: #FFFFFF; /* Primary — Kuble Blue. Cool, electric, signal. */ --kbl-blue-50: #EEF3FF; --kbl-blue-100: #D6E2FF; --kbl-blue-200: #ACC3FF; --kbl-blue-300: #7FA2FF; --kbl-blue-400: #4E7BFF; --kbl-blue-500: #2E5CFF; /* core */ --kbl-blue-600: #1E46E6; --kbl-blue-700: #1736B8; --kbl-blue-800: #122A8C; --kbl-blue-900: #0C1E66; /* Secondary — Amber. Warm counterpoint from key visual. Use sparingly. */ --kbl-amber-50: #FFF6E8; --kbl-amber-200: #FFD7A0; --kbl-amber-400: #FFA94D; --kbl-amber-500: #F7901F; --kbl-amber-600: #D9740A; --kbl-amber-800: #8A4703; /* Semantic */ --kbl-success: #3DD68C; --kbl-warning: #F7B84B; --kbl-danger: #F2545B; --kbl-info: var(--kbl-blue-400); /* ---------- ROLE TOKENS ---------- */ --bg: var(--kbl-ink-1000); --bg-raised: var(--kbl-ink-900); --bg-elevated: var(--kbl-ink-800); --bg-hover: var(--kbl-ink-700); --surface-line: var(--kbl-ink-600); --border: var(--kbl-ink-700); --border-strong: var(--kbl-ink-600); --text: var(--kbl-ink-50); --text-muted: var(--kbl-ink-300); --text-subtle: var(--kbl-ink-400); --text-inverse: var(--kbl-ink-1000); --accent: var(--kbl-blue-500); --accent-hover: var(--kbl-blue-400); --accent-press: var(--kbl-blue-600); --accent-soft: color-mix(in oklab, var(--kbl-blue-500) 16%, transparent); --highlight: var(--kbl-amber-500); --highlight-soft: color-mix(in oklab, var(--kbl-amber-500) 18%, transparent); /* ---------- TYPOGRAPHY ---------- */ --font-display: "Instrument Serif", "Source Serif Pro", Georgia, serif; --font-sans: "Montserrat", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — fluid, editorial */ --fs-12: 0.75rem; /* 12 */ --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-64: 4rem; --fs-80: 5rem; --fs-96: 6rem; --fs-128: 8rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5; --lh-loose: 1.7; --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-wide: 0.08em; --tracking-eyebrow: 0.14em; /* ---------- SPACING (4px grid) ---------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ /* ---------- RADII ---------- */ --r-0: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-2xl: 32px; --r-full: 9999px; /* ---------- SHADOWS ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--kbl-blue-400) 40%, transparent), 0 12px 40px -12px color-mix(in oklab, var(--kbl-blue-500) 60%, transparent); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; /* ---------- LAYOUT ---------- */ --container: 1240px; --container-narrow: 820px; --container-wide: 1440px; } /* ---------- LIGHT THEME (paired, for docs, reports, print) ---------- */ .theme-light { --bg: var(--kbl-ink-50); --bg-raised: #FFFFFF; --bg-elevated: #FFFFFF; --bg-hover: #EEF1F7; --border: #E4E8F0; --border-strong: #CED4E0; --text: var(--kbl-ink-1000); --text-muted: var(--kbl-ink-400); --text-subtle: var(--kbl-ink-300); --text-inverse: var(--kbl-ink-50); --accent-soft: color-mix(in oklab, var(--kbl-blue-500) 10%, transparent); --highlight-soft: color-mix(in oklab, var(--kbl-amber-500) 14%, transparent); } /* ---------- BASE ---------- */ html { background: var(--bg); color: var(--text); } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } ::selection { background: var(--accent); color: var(--text-inverse); }