/* ============================================================================ kb — Design System Foundations (web port) Colors, typography, spacing, radii, shadows, motion. Ported verbatim from the kb Design System handoff `colors_and_type.css`. Source of truth: kb/Views/Shared/DesignSystem.swift, ColorExtensions.swift, Assets.xcassets/AccentColor.colorset. WEB CHANGES vs. the handoff (only two): 1. UI typeface SF Pro -> Inter (Apple font is a licensing liability on the open web; Inter is OFL and metrically close). --font-sans updated. 2. @font-face blocks rewritten to self-hosted, latin-subset woff2 for Inter + Fira Code (both OFL). Paths are relative to this file in /css. Every color / spacing / radius / motion value is unchanged from the app. ============================================================================ */ /* ---- Self-hosted UI typeface: Inter (OFL) ------------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---- Self-hosted mono typeface: Fira Code (OFL) ------------------------- */ @font-face { font-family: "Fira Code"; src: url("../fonts/FiraCode-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Fira Code"; src: url("../fonts/FiraCode-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Fira Code"; src: url("../fonts/FiraCode-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- Brand accent (kb AccentColor.colorset) --------------------------- */ --accent: #4ba0f2; /* light mode: srgb(0.294, 0.627, 0.949) */ --accent-dark: #5ba8f7; /* dark mode: srgb(0.357, 0.659, 0.969) */ --accent-hover: #3a92ea; /* pressed/hover = accent @ ~0.88 luminosity */ --accent-tint-08: rgba(75, 160, 242, 0.08); /* SecondaryButton rest */ --accent-tint-15: rgba(75, 160, 242, 0.15); /* SecondaryButton pressed */ --brand-glow: #62e3d8; /* app-icon cyan glow — wordmark accent on dark */ /* ---- Neutral surfaces (light) — mirror macOS NSColor semantics --------- */ --window-bg: #ffffff; /* windowBackgroundColor */ --control-bg: #f4f4f5; /* controlBackgroundColor — keys, cards */ --text-bg: #fbfbfd; /* textBackgroundColor — lesson text area */ --tertiary-bg: rgba(120,120,128,0.12); /* tertiarySystemFill */ --secondary-bg: rgba(255,255,255,0.5); /* nested stat cards */ --sidebar-bg: #f6f6f7; /* translucent sidebar material */ --surface-tint: rgba(0, 0, 0, 0.04); /* DS.surfaceTint */ --separator: rgba(0, 0, 0, 0.10); --ink-bg: #0d0d10; /* the single dark "ink" spotlight band */ /* ---- Text (light) ------------------------------------------------------ */ --fg1: #1d1d1f; /* .primary — titles, values */ --fg2: #6e6e73; /* .secondary — labels, captions, metric labels */ --fg3: #8e8e93; /* .tertiary — chevrons, hints */ --fg-on-accent: #ffffff; /* ---- Semantic (DS.success / error / warning / neutral) ----------------- */ --success: #34c759; /* green — positive deltas, chart speed */ --error: #ff3b30; /* red — negative deltas */ --warning: #ff9f0a; /* orange — chart accuracy, progress bar */ --info: #4ba0f2; /* blue — chart keys */ --neutral: #8e8e93; /* ---- Key-confidence heatmap — red -> green, GENERATED IN OKLAB --------- */ /* Paint each key via heatColor(c) interpolating the two endpoints in Oklab. */ /* key(c) = color-mix(in oklab, var(--heat-high) calc(c*100%), var(--heat-low)) */ --heat-low: #e8584e; /* confidence 0.0 — slow / needs work */ --heat-high: #5fb85a; /* confidence 1.0 — mastered */ --heat-0: var(--heat-low); --heat-25: color-mix(in oklab, var(--heat-high) 25%, var(--heat-low)); --heat-50: color-mix(in oklab, var(--heat-high) 50%, var(--heat-low)); --heat-75: color-mix(in oklab, var(--heat-high) 75%, var(--heat-low)); --heat-100: var(--heat-high); --key-excluded: rgba(29,29,31,0.08); /* dimmed + diagonal cross */ --key-uncalibrated: rgba(29,29,31,0.12); /* ---- Finger-zone keyboard tints (light, pastel) ------------------------ */ --zone-pinky: #ffe5e5; --zone-ring: #ffffe5; --zone-middle: #e5ffe5; --zone-index: #e5e5ff; --zone-thumb: rgba(142,142,147,0.30); --key-stroke: rgba(29,29,31,0.20); /* ---- Type families ---------------------------------------------------- */ /* UI font = Inter (self-hosted, OFL). Falls back to the Apple system stack. */ --font-sans: "Inter", -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif; /* Mono font = Fira Code (self-hosted, OFL). Lesson text + key badges + numbers. */ --font-mono: "Fira Code", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, monospace; /* ---- App type scale (maps SwiftUI semantic .font roles) ---------------- */ --fs-largetitle: 26px; --lh-largetitle: 32px; --fw-largetitle: 700; --fs-title: 22px; --lh-title: 28px; --fw-title: 700; --fs-title2: 17px; --lh-title2: 22px; --fw-title2: 700; --fs-title3: 15px; --lh-title3: 20px; --fw-title3: 600; --fs-headline: 13px; --lh-headline: 18px; --fw-headline: 600; --fs-body: 13px; --lh-body: 18px; --fw-body: 400; --fs-callout: 12px; --lh-callout: 16px; --fw-callout: 400; --fs-subhead: 11px; --lh-subhead: 14px; --fw-subhead: 400; --fs-caption: 10px; --lh-caption: 13px; --fw-caption: 400; --fs-caption2: 9px; --lh-caption2: 12px; --fw-caption2: 400; --fs-lesson: 22px; --lh-lesson: 34px; /* ---- Web type scale (larger marketing scale — from web/README.md) ------ */ --fs-display: 64px; --lh-display: 1.05; --fw-display: 700; /* hero only */ --fs-section: 40px; --lh-section: 1.1; --fw-section: 700; /* section heads */ --fs-feature: 22px; --fw-feature: 600; /* feature titles */ --fs-lead: 20px; --lh-lead: 1.5; --fw-lead: 400; /* lead paragraph */ --fs-web-body:17px; --lh-web-body:1.6; --fw-web-body:400; /* web body */ --fs-eyebrow: 13px; --fw-eyebrow: 500; /* Fira Code caps */ --fs-stat: 56px; --fw-stat: 700; /* Fira Code stat */ /* ---- Spacing (DS.spacing*) -------------------------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-72: 72px; --space-120: 120px; /* web section rhythm */ /* ---- Corner radii (DS.corner*) ---------------------------------------- */ --radius-xs: 3px; /* key badges */ --radius-sm: 6px; /* small chips */ --radius-md: 8px; /* buttons, controls */ --radius-lg: 12px; /* cards */ --radius-pill: 999px; /* ---- Elevation -------------------------------------------------------- */ --shadow-window: 0 18px 50px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); --shadow-popover: 0 8px 24px rgba(0,0,0,0.15); --shadow-card: 0 1px 2px rgba(0,0,0,0.04); /* ---- Motion (DS animation tokens) ------------------------------------- */ --spring-default: cubic-bezier(0.34, 1.2, 0.64, 1); --spring-snappy: cubic-bezier(0.3, 1.3, 0.6, 1); --fade-quick: 150ms ease-in-out; --fade-medium: 250ms ease-in-out; --dur-quick: 150ms; --dur-medium: 250ms; /* ---- Layout (web) ----------------------------------------------------- */ --content-max: 1080px; --gutter: 24px; } /* ---- Dark mode: follows OS by default, overridable via [data-theme] ------ */ :root[data-theme="dark"] { --accent: #5ba8f7; --accent-hover: #4b98ea; --accent-tint-08: rgba(91, 168, 247, 0.12); --accent-tint-15: rgba(91, 168, 247, 0.20); --window-bg: #1e1e1e; --control-bg: #2c2c2e; --text-bg: #1a1a1c; --tertiary-bg: rgba(120,120,128,0.24); --secondary-bg: rgba(255,255,255,0.05); --sidebar-bg: #252527; --surface-tint: rgba(255, 255, 255, 0.04); --separator: rgba(255, 255, 255, 0.12); --fg1: #f5f5f7; --fg2: #a1a1a6; --fg3: #6e6e73; --key-excluded: rgba(245,245,247,0.08); --key-uncalibrated: rgba(245,245,247,0.12); --zone-pinky: #732e2e; --zone-ring: #66662e; --zone-middle: #2e662e; --zone-index: #2e2e73; --key-stroke: rgba(245,245,247,0.20); } /* Same dark overrides when the OS is dark and the user hasn't chosen a theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #5ba8f7; --accent-hover: #4b98ea; --accent-tint-08: rgba(91, 168, 247, 0.12); --accent-tint-15: rgba(91, 168, 247, 0.20); --window-bg: #1e1e1e; --control-bg: #2c2c2e; --text-bg: #1a1a1c; --tertiary-bg: rgba(120,120,128,0.24); --secondary-bg: rgba(255,255,255,0.05); --sidebar-bg: #252527; --surface-tint: rgba(255, 255, 255, 0.04); --separator: rgba(255, 255, 255, 0.12); --fg1: #f5f5f7; --fg2: #a1a1a6; --fg3: #6e6e73; --key-excluded: rgba(245,245,247,0.08); --key-uncalibrated: rgba(245,245,247,0.12); --zone-pinky: #732e2e; --zone-ring: #66662e; --zone-middle: #2e662e; --zone-index: #2e2e73; --key-stroke: rgba(245,245,247,0.20); } }