/* ========================================================================== Heatmap Housing — Design Tokens Single source of truth for colors, spacing, typography, and shadows. All static/marketing pages and doc pages import this file. Dark mode overrides are applied via [data-theme="dark"] on . ========================================================================== */ :root { /* ----------------------------------------------------------------------- Colors — Brand / Accent ----------------------------------------------------------------------- */ --primary: #06b6d4; --primary-dark: #0891b2; --primary-subtle: rgba(6, 182, 212, 0.1); --primary-subtle-faint: rgba(6, 182, 212, 0.05); --primary-subtle-border: rgba(6, 182, 212, 0.2); --primary-shadow: rgba(6, 182, 212, 0.3); /* ----------------------------------------------------------------------- Colors — Semantic ----------------------------------------------------------------------- */ --success: #10b981; --success-hover: #059669; --success-shadow: rgba(16, 185, 129, 0.3); --success-subtle: rgba(16, 185, 129, 0.1); --danger: #ef4444; --danger-subtle: rgba(239, 68, 68, 0.1); --warning: #f59e0b; --warning-subtle: rgba(245, 158, 11, 0.1); --warning-strong: #d97706; --link: #3b82f6; /* ----------------------------------------------------------------------- Colors — Neutral Text ----------------------------------------------------------------------- */ --darker: #1e293b; /* Headings — highest contrast */ --dark: #334155; /* Subheadings, nav */ --text: #1e293b; /* Body text */ --text-secondary: #374151; /* Secondary body text */ --text-muted: #64748b; /* Muted / captions */ --text-light: #94a3b8; /* Tertiary / footer text */ --text-faint: #9ca3af; /* Very faint labels */ /* ----------------------------------------------------------------------- Colors — Backgrounds ----------------------------------------------------------------------- */ --bg-white: #ffffff; /* Page / card background */ --bg-light: #f8fafc; /* Subtle recessed sections */ --bg-code: #f3f4f6; /* Code blocks, kbd */ --bg-highlight: #eff6ff; /* Info highlight boxes */ --bg-info: #f0f9ff; /* Info callout */ --bg-info-border: #bae6fd; --bg-tip: #f0fdf4; /* Tip callout */ --bg-warning: #fef3c7; /* Warning callout */ --bg-warning-border: #fcd34d; --bg-surface: #f9fafb; /* Elevated surface (cards in recessed bg) */ /* ----------------------------------------------------------------------- Colors — Borders ----------------------------------------------------------------------- */ --border: #e2e8f0; --border-light: #e5e7eb; --border-medium: #d1d5db; /* ----------------------------------------------------------------------- Colors — Shadows ----------------------------------------------------------------------- */ --shadow: rgba(0, 0, 0, 0.1); --shadow-lg: rgba(0, 0, 0, 0.15); --shadow-screenshot: rgba(0, 0, 0, 0.15); /* ----------------------------------------------------------------------- Colors — Badges ----------------------------------------------------------------------- */ --badge-success-bg: #d1fae5; --badge-success-text: #065f46; --badge-primary-bg: #cffafe; --badge-primary-text: #164e63; --badge-warning-bg: #fed7aa; --badge-warning-text: #92400e; --badge-pro-bg: #dbeafe; --badge-pro-text: #1e40af; --badge-free-bg: #f3f4f6; --badge-free-text: #374151; /* ----------------------------------------------------------------------- Colors — Callout accents (docs) ----------------------------------------------------------------------- */ --tip-accent: #059669; --highlight-border: #3b82f6; --code-text: #ef4444; /* Changelog category colors */ --category-new: #10b981; --category-improved: #3b82f6; --category-fixed: #ef4444; /* ----------------------------------------------------------------------- Colors — Contextual: Landing page problem cards ----------------------------------------------------------------------- */ --problem-bad-border: rgba(239, 68, 68, 0.3); --problem-bad-bg: rgba(254, 226, 226, 0.3); --problem-good-border: rgba(16, 185, 129, 0.3); --problem-good-bg: rgba(209, 250, 229, 0.3); /* ----------------------------------------------------------------------- Colors — Contextual: Navigation ----------------------------------------------------------------------- */ --nav-bg: rgba(255, 255, 255, 0.95); /* ----------------------------------------------------------------------- Colors — Contextual: Footer / dark sections (These do NOT invert — they stay dark in both themes.) ----------------------------------------------------------------------- */ --footer-bg: #1e293b; --footer-border: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------- Colors — Contextual: CTA section ----------------------------------------------------------------------- */ --cta-bg-start: #334155; --cta-bg-end: #1e293b; /* ----------------------------------------------------------------------- Colors — Contextual: About page accents ----------------------------------------------------------------------- */ --mission-bg-start: #f0fdf4; --mission-bg-end: #ecfdf5; --mission-border: #22c55e; --mission-text: #166534; --founder-bg: #f9fafb; --founder-avatar-start: #3b82f6; --founder-avatar-end: #1d4ed8; /* ----------------------------------------------------------------------- Colors — Contextual: Contact page ----------------------------------------------------------------------- */ --input-bg: #ffffff; --input-border: #d1d5db; --input-focus-border: #3b82f6; --input-focus-shadow: rgba(59, 130, 246, 0.1); --form-success: #16a34a; --form-error: #dc2626; /* ----------------------------------------------------------------------- Colors — Contextual: Legal page callouts (terms) ----------------------------------------------------------------------- */ --legal-warning-bg: #fff3cd; --legal-warning-border: #ffc107; --legal-danger-bg: #f8d7da; --legal-danger-border: #dc3545; /* ----------------------------------------------------------------------- Typography ----------------------------------------------------------------------- */ --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Courier New', monospace; /* ----------------------------------------------------------------------- Spacing Scale ----------------------------------------------------------------------- */ --spacing-xs: 0.5rem; --spacing-sm: 0.875rem; --spacing-md: 1.25rem; --spacing-lg: 1.75rem; --spacing-xl: 2.5rem; --spacing-2xl: 3.5rem; --spacing-3xl: 4.5rem; /* ----------------------------------------------------------------------- Border Radius ----------------------------------------------------------------------- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* ----------------------------------------------------------------------- Transitions ----------------------------------------------------------------------- */ --transition: all 0.2s ease; } /* =========================================================================== Dark Theme Overrides Applied when is set. Static pages always set this; the app toggles it via JS. =========================================================================== */ [data-theme="dark"] { /* -- Brand / Accent ---------------------------------------------------- */ --primary: #22d3ee; --primary-dark: #06b6d4; --primary-subtle: rgba(34, 211, 238, 0.12); --primary-subtle-faint: rgba(34, 211, 238, 0.06); --primary-subtle-border: rgba(34, 211, 238, 0.25); --primary-shadow: rgba(34, 211, 238, 0.25); /* -- Semantic ---------------------------------------------------------- */ --success: #34d399; --success-hover: #10b981; --success-shadow: rgba(52, 211, 153, 0.25); --success-subtle: rgba(52, 211, 153, 0.12); --danger: #f87171; --danger-subtle: rgba(248, 113, 113, 0.12); --warning: #fbbf24; --warning-subtle: rgba(251, 191, 36, 0.12); --warning-strong: #f59e0b; --link: #60a5fa; /* -- Neutral Text ------------------------------------------------------ */ --darker: #f1f5f9; --dark: #cbd5e1; --text: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-light: #64748b; --text-faint: #6b7280; /* -- Backgrounds ------------------------------------------------------- */ --bg-white: #0f172a; --bg-light: #1e293b; --bg-code: #1e293b; --bg-highlight: #172554; --bg-info: #0c4a6e; --bg-info-border: #075985; --bg-tip: #064e3b; --bg-warning: #78350f; --bg-warning-border: #92400e; --bg-surface: #1e293b; /* -- Borders ----------------------------------------------------------- */ --border: #334155; --border-light: #1e293b; --border-medium: #475569; /* -- Shadows ----------------------------------------------------------- */ --shadow: rgba(0, 0, 0, 0.3); --shadow-lg: rgba(0, 0, 0, 0.4); --shadow-screenshot: rgba(0, 0, 0, 0.4); /* -- Badges ------------------------------------------------------------ */ --badge-success-bg: #064e3b; --badge-success-text: #a7f3d0; --badge-primary-bg: #164e63; --badge-primary-text: #a5f3fc; --badge-warning-bg: #78350f; --badge-warning-text: #fde68a; --badge-pro-bg: #1e3a5f; --badge-pro-text: #93c5fd; --badge-free-bg: #334155; --badge-free-text: #cbd5e1; /* -- Callout accents (docs) -------------------------------------------- */ --tip-accent: #34d399; --highlight-border: #60a5fa; --code-text: #f87171; --category-new: #34d399; --category-improved: #60a5fa; --category-fixed: #f87171; /* -- Problem cards ------------------------------------------------------ */ --problem-bad-border: rgba(248, 113, 113, 0.3); --problem-bad-bg: rgba(248, 113, 113, 0.08); --problem-good-border: rgba(52, 211, 153, 0.3); --problem-good-bg: rgba(52, 211, 153, 0.08); /* -- Navigation -------------------------------------------------------- */ --nav-bg: rgba(15, 23, 42, 0.95); /* -- Footer / dark sections (stay dark) -------------------------------- */ --footer-bg: #0b1222; --footer-border: rgba(255, 255, 255, 0.06); /* -- CTA section ------------------------------------------------------- */ --cta-bg-start: #1e293b; --cta-bg-end: #0f172a; /* -- About page accents ------------------------------------------------ */ --mission-bg-start: #064e3b; --mission-bg-end: #064e3b; --mission-border: #34d399; --mission-text: #a7f3d0; --founder-bg: #1e293b; --founder-avatar-start: #3b82f6; --founder-avatar-end: #1d4ed8; /* -- Contact page ------------------------------------------------------ */ --input-bg: #1e293b; --input-border: #475569; --input-focus-border: #60a5fa; --input-focus-shadow: rgba(96, 165, 250, 0.15); --form-success: #34d399; --form-error: #f87171; /* -- Legal callouts ---------------------------------------------------- */ --legal-warning-bg: #78350f; --legal-warning-border: #f59e0b; --legal-danger-bg: #450a0a; --legal-danger-border: #f87171; }