/* ========================================================================== FOUNDATIONS — design tokens shared by every page. Change a value here and it propagates everywhere (components.css and every page reference these custom properties, never raw hex values). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root{ /* ---- Color: neutral scale (zinc) ---- */ --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8; --zinc-400:#a1a1aa; --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46; --zinc-800:#27272a; --zinc-900:#18181b; --zinc-950:#09090b; /* ---- Color: semantic (light mode) ---- */ --bg: #ffffff; --bg-subtle: var(--zinc-50); --surface: #ffffff; --surface-hover: var(--zinc-50); --border: var(--zinc-200); --text: var(--zinc-900); --text-muted: var(--zinc-500); --text-faint: var(--zinc-400); --primary: var(--zinc-900); --primary-fg: #ffffff; --ring: rgba(24,24,27,.10); /* ---- Color: status ---- */ --success:#16a34a; --success-bg:#f0fdf4; --success-border:#bbf7d0; --warning:#d97706; --warning-bg:#fffbeb; --warning-border:#fde68a; --danger:#dc2626; --danger-bg:#fef2f2; --danger-border:#fecaca; --info:#2563eb; --info-bg:#eff6ff; --info-border:#bfdbfe; /* ---- Color: data-viz palette (charts) ---- */ --chart-1:#18181b; --chart-2:#71717a; --chart-3:#f97316; --chart-4:#2563eb; --chart-5:#16a34a; --chart-6:#db2777; /* ---- Typography ---- */ --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --text-xs:11px; --text-sm:12px; --text-base:13px; --text-md:14px; --text-lg:16px; --text-xl:18px; --text-2xl:22px; --text-3xl:28px; --leading-tight:1.25; --leading-normal:1.5; --leading-relaxed:1.7; /* ---- Spacing scale (4px base) ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; /* ---- Radius ---- */ --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-full:999px; /* ---- Shadows ---- */ --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 12px 32px rgba(0,0,0,.12); /* ---- Layout ---- */ --sidebar-w:240px; --sidebar-w-collapsed:64px; --topbar-h:52px; --navbar-h:50px; --container-max:1180px; } /* ---- Dark mode: toggled by [data-theme="dark"] on , see shell.js ---- */ html[data-theme="dark"]{ --bg: var(--zinc-950); --bg-subtle: var(--zinc-900); --surface: var(--zinc-900); --surface-hover: var(--zinc-800); --border: var(--zinc-800); --text: var(--zinc-50); --text-muted: var(--zinc-400); --text-faint: var(--zinc-600); --primary: #ffffff; --primary-fg: var(--zinc-900); --ring: rgba(255,255,255,.12); --success-bg:#052e16; --warning-bg:#451a03; --danger-bg:#450a0a; --info-bg:#172554; } /* ---- Breakpoints (documented — used inside page-level media queries) ---- --bp-sm: 576px compact panels collapse --bp-md: 768px sidebar auto-collapses, side panels stack --bp-lg: 992px col-lg-* breakpoint for Bootstrap grid --bp-xl: 1200px full desktop layout ------------------------------------------------------------------------ */ /* ---- Base ---- */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:var(--bg-subtle); color:var(--text); font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-normal); -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } code, .mono{ font-family:var(--font-mono); } ::selection{ background:var(--ring); } /* ---- Type scale utility classes ---- */ .text-xs{font-size:var(--text-xs);} .text-sm{font-size:var(--text-sm);} .text-base{font-size:var(--text-base);} .text-md{font-size:var(--text-md);} .text-lg{font-size:var(--text-lg);} .text-xl{font-size:var(--text-xl);} .text-2xl{font-size:var(--text-2xl);} .text-3xl{font-size:var(--text-3xl);} .fw-medium{font-weight:500;} .fw-semibold{font-weight:600;} .fw-bold{font-weight:700;} .text-muted-c{color:var(--text-muted);} .text-faint-c{color:var(--text-faint);} h1,h2,h3,h4,h5,h6{ margin:0; font-weight:600; } h1{font-size:var(--text-2xl);} h2{font-size:var(--text-xl);} h3{font-size:var(--text-lg);} .page-title{ font-size:var(--text-xl); font-weight:600; margin-bottom:2px; } .page-subtitle{ font-size:var(--text-sm); color:var(--text-muted); margin-bottom:var(--space-5); } /* ---- Grid layout: now handled by Bootstrap's .row / .col-* classes ---- */ .stack-1>*+*{margin-top:var(--space-1);} .stack-2>*+*{margin-top:var(--space-2);} .stack-3>*+*{margin-top:var(--space-3);} .stack-4>*+*{margin-top:var(--space-4);} .flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-1{gap:var(--space-1);} .gap-2{gap:var(--space-2);} .gap-3{gap:var(--space-3);}