/* GPUHosted — Design System * Indigo #4F46E5 + Cyan #06B6D4 * JS sets [data-theme="dark"|"light"] on from localStorage/system pref. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── LIGHT MODE (default) ──────────────────────────────────────────────── */ :root { color-scheme: light; --color-primary: #4F46E5; --color-primary-hover: #4338CA; --color-primary-rgb: 79,70,229; --color-primary-light: rgba(79,70,229,0.06); --color-primary-border: rgba(79,70,229,0.18); --color-accent: #0891B2; --color-accent-hover: #0E7490; --color-accent-light: rgba(8,145,178,0.07); --color-bg: #ffffff; --color-bg-alt: #f8fafc; --color-bg-card: #ffffff; --color-bg-elevated: #f1f5f9; --color-bg-overlay: rgba(255,255,255,0.92); --color-bg-code: #f6f8fa; --color-text: #0f172a; --color-text-muted: #475569; --color-text-subtle: #64748b; --color-text-inverse: #ffffff; --color-border: rgba(15,23,42,0.08); --color-border-strong: rgba(15,23,42,0.14); --color-border-accent: rgba(79,70,229,0.22); --color-border-input: #d1d5db; --color-success: #059669; --color-success-bg: #ecfdf5; --color-warning: #d97706; --color-warning-bg: #fffbeb; --color-danger: #dc2626; --color-danger-bg: #fef2f2; --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 8px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04); --shadow-lg: 0 10px 24px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04); --shadow-xl: 0 20px 40px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05); --shadow-glow: 0 0 0 3px rgba(79,70,229,0.12), 0 4px 12px rgba(79,70,229,0.08); --shadow-glow-accent: 0 0 0 3px rgba(8,145,178,0.12); --font-heading: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; } /* ── DARK MODE ─────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --color-primary: #6366F1; --color-primary-hover: #4F46E5; --color-primary-rgb: 99,102,241; --color-primary-light: rgba(99,102,241,0.1); --color-primary-border: rgba(99,102,241,0.25); --color-accent: #06B6D4; --color-accent-hover: #0891B2; --color-accent-light: rgba(6,182,212,0.08); --color-bg: #09090b; --color-bg-alt: #0d0d10; --color-bg-card: #111114; --color-bg-elevated: #18181c; --color-bg-overlay: rgba(9,9,11,0.92); --color-bg-code: #16161a; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-text-inverse: #0f172a; --color-border: rgba(255,255,255,0.07); --color-border-strong: rgba(255,255,255,0.12); --color-border-accent: rgba(99,102,241,0.3); --color-border-input: rgba(255,255,255,0.12); --color-success: #10b981; --color-success-bg: rgba(16,185,129,0.08); --color-warning: #f59e0b; --color-warning-bg: rgba(245,158,11,0.08); --color-danger: #ef4444; --color-danger-bg: rgba(239,68,68,0.08); --shadow-xs: 0 1px 2px rgba(0,0,0,0.5); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); --shadow-xl: 0 20px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); --shadow-glow: 0 0 0 1px rgba(99,102,241,0.3), 0 0 20px rgba(99,102,241,0.15); --shadow-glow-accent: 0 0 0 1px rgba(6,182,212,0.3), 0 0 16px rgba(6,182,212,0.1); } /* ── BASE ──────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--transition-slow), color var(--transition-slow); } *, *::before, *::after { box-sizing: border-box; } img, svg { max-width: 100%; height: auto; display: block; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); color: var(--color-text); line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; margin: 0; } h1 { font-size: clamp(2rem,5vw,3.5rem); font-weight: 800; letter-spacing: -0.04em; } h2 { font-size: clamp(1.5rem,3vw,2.25rem); letter-spacing: -0.03em; } h3 { font-size: 1.25rem; } h4 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 1rem; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } .mono { font-family: var(--font-mono); } /* Gradient text utility */ .text-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }