/* ========================================================================== Helmd — Colors & Type Source of truth for tokens used across web, UI kits, slides, and mocks. Import this file (or copy vars inline) into any new artifact. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@300;400;500&display=swap'); :root { /* ---------- Core Palette ---------- */ --bg: #111111; /* primary dark background */ --ivory: #FAFAF8; /* primary light / text on dark */ --accent: #FBBC04; /* gold — CTA + decorative only */ --white: #FFFFFF; /* ---------- Text on dark ---------- */ --fg-d-1: rgba(250,250,248,1); /* primary */ --fg-d-2: rgba(250,250,248,0.82); /* secondary / body */ --fg-d-3: rgba(250,250,248,0.60); /* muted */ --fg-d-4: rgba(250,250,248,0.50); /* faint / disclaimer */ /* ---------- Text on light ---------- */ --fg-l-1: rgba(17,17,17,1); --fg-l-2: rgba(17,17,17,0.88); --fg-l-3: rgba(17,17,17,0.60); --fg-l-4: rgba(17,17,17,0.50); /* ---------- Borders & Surfaces ---------- */ --border-d: rgba(250,250,248,0.12); --border-l: rgba(17,17,17,0.10); --surface-d: rgba(250,250,248,0.04); --surface-d-hi: rgba(250,250,248,0.08); --surface-l: rgba(17,17,17,0.04); /* ---------- Semantic (for product UI — NOT marketing) ---------- */ --success: #2E7D32; --error: #C62828; --warning: #F9A825; --info: #1565C0; /* use this for links on light; gold fails WCAG */ /* ---------- Typography families ---------- */ --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* ---------- Semantic type (ready-to-use var tokens) ---------- */ --h1-size: clamp(36px, 7vw, 64px); --h1-weight: 800; --h1-ls: -2px; --h1-lh: 1.05; --h2-size: clamp(28px, 5vw, 44px); --h2-weight: 800; --h2-ls: -1.5px; --h2-lh: 1.1; --h3-size: 17px; --h3-weight: 700; --h3-ls: -0.2px; --h3-lh: 1.3; --body-size: 14px; --body-lh: 1.7; --label-size: 11px; --label-weight: 500; --label-ls: 1.6px; /* ---------- Spacing (8pt grid) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 80px; --s-8: 120px; --px: clamp(20px, 5vw, 64px); --max-w: 1140px; /* ---------- Radii ---------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; /* ---------- Section rhythm ---------- */ --section-py: clamp(56px, 10vw, 96px); } /* ========================================================================== Base element styles Apply or ========================================================================== */ html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } body { font-family: var(--sans); font-size: var(--body-size); line-height: var(--body-lh); margin: 0; } .theme-dark { background: var(--bg); color: var(--fg-d-1); } .theme-light { background: var(--ivory); color: var(--fg-l-1); } h1, .t-h1 { font-family: var(--sans); font-weight: var(--h1-weight); font-size: var(--h1-size); letter-spacing: var(--h1-ls); line-height: var(--h1-lh); margin: 0; } h2, .t-h2 { font-family: var(--sans); font-weight: var(--h2-weight); font-size: var(--h2-size); letter-spacing: var(--h2-ls); line-height: var(--h2-lh); margin: 0; } h3, h4, .t-h3 { font-family: var(--sans); font-weight: var(--h3-weight); font-size: var(--h3-size); letter-spacing: var(--h3-ls); line-height: var(--h3-lh); margin: 0; } p, .t-body { font-size: var(--body-size); line-height: var(--body-lh); margin: 0; } .t-label, .label { font-family: var(--mono); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-ls); text-transform: uppercase; } .t-mono { font-family: var(--mono); } .t-accent { color: var(--accent); } .t-disc { font-size: 11px; line-height: 1.8; color: var(--fg-d-4); }