/* ============================================================================ * DESIGN SYSTEM — FOUNDATIONS / TOKENS * ---------------------------------------------------------------------------- * The single source of truth for the brand. Every medium (web, slides, visual * assets) builds on the variables defined here. Change a token once — it * propagates everywhere. * * Aesthetic: dark-mode first, high-contrast, minimalist, tech-forward. * Electric-blue accent on a near-black slate. Subtle glow as the signature * elevation cue. * * THEMING * Dark is the default (`:root`). Opt into light mode by setting * `data-theme="light"` on (or any ancestor). Color tokens are stored * as raw HSL channels and consumed as `hsl(var(--token))` so they can be * tinted with an opacity suffix, e.g. `hsl(var(--primary) / 0.12)`. * ==========================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* =========================================================================== * 1. DARK THEME (default) * ==========================================================================*/ :root { /* ---- Surfaces (blue-tinted near-blacks, layered for depth) ------------- */ --background: 216 16% 6%; /* #0d0f12 — app canvas */ --foreground: 216 26% 93%; /* #e7ebf1 — primary text */ --card: 225 19% 8%; /* #111319 — elevated surface */ --card-foreground: 216 26% 93%; --popover: 225 19% 8%; --popover-foreground: 216 26% 93%; /* ---- Brand ------------------------------------------------------------- */ --primary: 217 90% 60%; /* #3b82f5 — electric blue */ --primary-foreground: 216 16% 6%; /* ---- Soft surfaces ----------------------------------------------------- */ --secondary: 225 19% 13%; /* #1b1e28 — input / soft surface */ --secondary-foreground: 216 26% 93%; --muted: 225 19% 13%; --muted-foreground: 213 9% 54%; /* #808994 — secondary text */ --accent: 225 19% 16%; /* hover surface */ --accent-foreground: 216 26% 93%; /* ---- Status ------------------------------------------------------------ */ --destructive: 0 70% 55%; --destructive-foreground: 210 40% 98%; --success: 145 70% 45%; --warning: 38 90% 55%; /* ---- Lines & focus ----------------------------------------------------- */ --border: 225 19% 14%; /* #1b1e28 — low-contrast divider */ --input: 225 19% 14%; --ring: 217 90% 60%; /* ---- Glow (signature elevation cue) ------------------------------------ */ --glow-primary: 217 90% 60%; --glow-sm: 0 0 10px -2px hsl(var(--glow-primary) / 0.30); --glow-md: 0 0 20px -4px hsl(var(--glow-primary) / 0.30); --glow-lg: 0 0 36px -6px hsl(var(--glow-primary) / 0.35); --glow-text: 0 0 12px hsl(var(--glow-primary) / 0.50); /* ---- Drop shadows ------------------------------------------------------ */ --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.40); --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.40); --shadow-lg: 0 12px 28px -8px hsl(0 0% 0% / 0.55); --shadow-xl: 0 20px 40px -12px hsl(0 0% 0% / 0.60); /* ---- Grid-bg motif opacity -------------------------------------------- */ --grid-line: hsl(var(--border) / 0.30); } /* =========================================================================== * 2. LIGHT THEME — set data-theme="light" * Derived from dark: same ~217° hue family, inverted lightness, real (dark) * drop shadows replace heavy glow, glow becomes a faint primary-tinted lift. * ==========================================================================*/ [data-theme="light"], .ci-theme { --background: 220 24% 98%; /* #f8f9fb — app canvas */ --foreground: 222 28% 12%; /* #161b26 — primary text */ --card: 0 0% 100%; /* #ffffff — elevated surface */ --card-foreground: 222 28% 12%; --popover: 0 0% 100%; --popover-foreground: 222 28% 12%; --primary: 217 88% 54%; /* #2274ea — deepened for white bg */ --primary-foreground: 0 0% 100%; --secondary: 220 20% 95%; /* #eef0f4 — input / soft surface */ --secondary-foreground: 222 28% 12%; --muted: 220 20% 95%; --muted-foreground: 220 12% 42%; /* #5d646f — secondary text */ --accent: 220 20% 92%; /* hover surface */ --accent-foreground: 222 28% 12%; --destructive: 0 72% 50%; --destructive-foreground: 0 0% 100%; --success: 145 62% 36%; --warning: 36 84% 44%; --border: 220 18% 89%; /* #dde0e7 — divider */ --input: 220 18% 89%; --ring: 217 88% 54%; --glow-primary: 217 88% 54%; --glow-sm: 0 2px 10px -3px hsl(var(--glow-primary) / 0.30); --glow-md: 0 4px 18px -4px hsl(var(--glow-primary) / 0.32); --glow-lg: 0 10px 32px -8px hsl(var(--glow-primary) / 0.35); --glow-text: 0 0 1px hsl(var(--glow-primary) / 0.20); --shadow-sm: 0 1px 2px hsl(222 28% 20% / 0.08); --shadow-md: 0 4px 12px hsl(222 28% 20% / 0.10); --shadow-lg: 0 12px 28px -8px hsl(222 28% 20% / 0.16); --shadow-xl: 0 20px 40px -12px hsl(222 28% 20% / 0.22); --grid-line: hsl(var(--border) / 0.70); } /* =========================================================================== * 3. THEME-INDEPENDENT TOKENS * ==========================================================================*/ :root { /* ---- Module / category accents ---------------------------------------- * * Used on badges, charts, finance/category tiles. At full saturation as * dots & strokes; at /10–/20 opacity as background tints. */ --accent-cyan: #06b6d4; --accent-emerald: #10b981; --accent-amber: #f59e0b; --accent-violet: #8b5cf6; --accent-red: #ef4444; --accent-rose: #f43f5e; --accent-orange: #f97316; --accent-purple: #a855f7; --accent-teal: #14b8a6; --accent-yellow: #eab308; /* ---- Radii (6 / 8 / 10 / 12 / 16 / 20) -------------------------------- */ --radius: 0.75rem; /* 12px — default */ --radius-sm: calc(var(--radius) - 4px); /* 8px */ --radius-md: calc(var(--radius) - 2px); /* 10px — buttons */ --radius-lg: var(--radius); /* 12px — cards */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.25rem; /* 20px — modals, hero blocks */ --radius-full: 9999px; /* ---- Spacing (8px base, mirrors Tailwind) ----------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ---- Typography -------------------------------------------------------- */ --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-xs: 0.75rem; /* 12 — labels, captions, timestamps */ --text-sm: 0.875rem; /* 14 — body small, table rows, buttons */ --text-base: 1rem; /* 16 — body */ --text-lg: 1.125rem; /* 18 — emphasis */ --text-xl: 1.25rem; /* 20 — section title */ --text-2xl: 1.5rem; /* 24 — page title (compact) */ --text-3xl: 1.875rem; /* 30 — page title */ --text-4xl: 2.5rem; /* 40 — display */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* uppercase eyebrows */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Motion ----------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; } /* =========================================================================== * 4. SEMANTIC / ROLE-BASED SHORTCUTS * Pre-resolved hsl() values for ergonomic use outside the token layer. * ==========================================================================*/ :root { --bg-app: hsl(var(--background)); --bg-elevated: hsl(var(--card)); --bg-input: hsl(var(--secondary)); --bg-hover: hsl(var(--accent)); --fg-1: hsl(var(--foreground)); /* primary text */ --fg-2: hsl(var(--muted-foreground)); /* secondary / metadata */ --fg-brand: hsl(var(--primary)); --border-subtle: hsl(var(--border)); } /* =========================================================================== * 5. BASE ELEMENT STYLES + .ds-* UTILITIES * ==========================================================================*/ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg-app); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ci-theme { background-color: var(--bg-app); color: var(--fg-1); } h1, .ds-h1 { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--fg-1); } h2, .ds-h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); color: var(--fg-1); } h3, .ds-h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--fg-1); } p, .ds-body { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-1); } .ds-display { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .ds-body-lg { font-size: var(--text-base); } .ds-muted { color: var(--fg-2); } /* Eyebrow — 10px bold uppercase, wide tracking. A recurring brand tic. */ .ds-eyebrow { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-2); } code, pre, .ds-mono { font-family: var(--font-mono); font-size: 0.95em; font-feature-settings: "tnum" 1; /* tabular figures for data */ } a, .ds-link { color: var(--fg-brand); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } a:hover, .ds-link:hover { text-decoration: underline; text-underline-offset: 2px; } /* ---- Signature utilities -------------------------------------------------*/ /* grid-bg — 40px lattice of 1px lines. The NASA-console motif. */ .ds-grid-bg { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; } .ds-glow-sm { box-shadow: var(--glow-sm); } .ds-glow-md { box-shadow: var(--glow-md); } .ds-glow-lg { box-shadow: var(--glow-lg); } .ds-glow-text { text-shadow: var(--glow-text); } /* pulse-glow — reserved for status dots ("System Online", "API Connected"). */ @keyframes ds-pulse-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .ds-pulse-glow { animation: ds-pulse-glow 2s var(--ease-standard) infinite; } /* Scoped utilities for .ci-theme compatibility */ .ci-grid-bg { background-image: linear-gradient(hsl(var(--border) / 0.7) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border) / 0.7) 1px, transparent 1px); background-size: 40px 40px; } .ci-eyebrow { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: hsl(var(--muted-foreground)); } .ci-glow-hover { transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .ci-glow-hover:hover { border-color: hsl(var(--primary) / 0.4); box-shadow: 0 4px 18px -4px hsl(var(--primary) / 0.32); } @media (prefers-reduced-motion: reduce) { .ds-pulse-glow { animation: none; } .ci-glow-hover { transition: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } }