/* ============================================================
GENIE DESIGN TOKENS
Single source of truth. Never hardcode values in components.
Reference: B2B SaaS density (Linear / Stripe Dashboard / Vercel)
============================================================ */
/* Fonts — load via Google Fonts CDN at top of HTML :
*/
:root {
/* --- Typography --- */
--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
--text-body: 13px; /* default body */
--text-dense: 12px; /* data tables, dense pages */
--text-header: 10px; /* all-caps section headers */
--text-numeric: 14px; /* KPIs, calendar dates, stat numbers */
--text-title: 16px; /* page titles — NEVER LARGER */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-heavy: 800;
--letter-header: 0.05em; /* tracking for all-caps headers */
/* --- Day theme (default) --- */
--color-bg: #F8FAFC; /* slate-50 — page background */
--color-surface: #FFFFFF; /* cards, panels */
--color-surface-2: #F1F5F9; /* hover, alt rows, sunken */
--color-border: #E2E8F0; /* slate-200 — all borders */
--color-text: #020617; /* slate-950 — primary text */
--color-muted: #64748B; /* slate-500 — secondary text */
--color-accent: #0369A1; /* sky-700 — Genesis brand blue */
--color-accent-dim: #E0F2FE; /* sky-100 — selected bg, badges */
--color-success: #16A34A;
--color-success-dim: #DCFCE7; /* green-100 — success badge bg */
--color-warning: #D97706;
--color-warning-dim: #FEF3C7; /* amber-100 — warning badge bg */
--color-error: #DC2626;
--color-error-dim: #FEE2E2; /* red-100 — error badge bg */
/* --- Topbar (always navy regardless of theme) --- */
--color-topbar: #0F172A;
--color-topbar-text: #F1F5F9;
/* --- Spacing (4px grid — NEVER use 10/14/18/20) --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* --- Radius --- */
--radius-sm: 4px; /* badges, small chips */
--radius-md: 6px; /* buttons, inputs, cards */
--radius-lg: 10px; /* modals, large containers */
/* --- Component dimensions --- */
--height-input: 32px;
--height-button: 32px;
--height-row: 36px;
--height-topbar: 52px;
--width-sidebar: 240px;
/* --- Borders --- */
--border-default: 1px solid var(--color-border);
--focus-ring: 0 0 0 2px var(--color-accent);
/* --- Transitions --- */
--transition: 120ms ease;
}
/* --- Night theme --- */
[data-theme="night"] {
--color-bg: #0F172A; /* slate-900 */
--color-surface: #1E293B; /* slate-800 */
--color-surface-2: #334155; /* slate-700 */
--color-border: #334155;
--color-text: #F1F5F9; /* slate-100 */
--color-muted: #94A3B8; /* slate-400 */
--color-accent: #38BDF8; /* sky-400 — brighter for dark */
--color-accent-dim: #075985; /* sky-800 */
--color-success-dim: #14532D; /* green-900 — night success bg */
--color-warning-dim: #78350F; /* amber-900 — night warning bg */
--color-error-dim: #7F1D1D; /* red-900 — night error bg */
}
/* --- Base reset / global --- */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: var(--weight-regular);
background: var(--color-bg);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* All-caps section headers */
.section-header {
font-size: var(--text-header);
font-weight: var(--weight-bold);
letter-spacing: var(--letter-header);
text-transform: uppercase;
color: var(--color-muted);
}
/* Code / numeric */
code, .mono, .numeric {
font-family: var(--font-mono);
}