/* ============================================================================ Scout — design tokens ============================================================================ Single source of truth for ALL design decisions. Never hardcode colors, spacing, fonts, or radii anywhere in the codebase — always reference a token. Colors are stored as raw HSL channels so we can produce transparent variants with hsl(var(--primary) / 0.2). This pattern is identical to lp.moco.inc, so the two products are interchangeable at the CSS-variable layer. Default theme is dark (matches lp.moco.inc and Jeff's stated preference). Light theme is available via [data-theme="light"] on the element. ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); :root, [data-theme="dark"] { /* ---- Surface ---- */ --background: 230 15% 5.5%; --foreground: 210 40% 96%; --card: 230 14% 8%; --card-foreground: 210 40% 96%; --popover: 230 14% 8%; --popover-foreground: 210 40% 96%; --sidebar: 230 15% 6.5%; --surface-1: 230 14% 10%; --surface-2: 230 14% 12%; --text-strong: 210 40% 98%; /* ---- Brand / interactive ---- */ --primary: 220 90% 56%; --primary-foreground: 0 0% 100%; --secondary: 230 12% 12%; --secondary-foreground: 210 20% 80%; --muted: 230 12% 12%; --muted-foreground: 220 10% 46%; --accent: 230 12% 15%; --accent-foreground: 210 40% 96%; /* ---- State ---- */ --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --success: 142 71% 45%; --success-foreground: 0 0% 100%; --warning: 38 92% 50%; --warning-foreground: 224 20% 12%; --info: 199 89% 48%; --info-foreground: 0 0% 100%; /* ---- Borders / inputs ---- */ --border: 230 10% 15%; --input: 230 10% 15%; --ring: 220 90% 56%; } [data-theme="light"] { --background: 220 20% 97%; --foreground: 224 20% 12%; --card: 0 0% 100%; --card-foreground: 224 20% 12%; --popover: 0 0% 100%; --popover-foreground: 224 20% 12%; --sidebar: 220 20% 95%; --surface-1: 220 18% 95%; --surface-2: 220 16% 92%; --text-strong: 224 30% 8%; --primary: 220 90% 50%; --primary-foreground: 0 0% 100%; --secondary: 220 14% 92%; --secondary-foreground: 224 20% 30%; --muted: 220 14% 92%; --muted-foreground: 220 10% 46%; --accent: 220 14% 94%; --accent-foreground: 224 20% 12%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --success: 142 71% 38%; --success-foreground: 0 0% 100%; --warning: 38 92% 45%; --warning-foreground: 224 20% 12%; --info: 199 89% 42%; --info-foreground: 0 0% 100%; --border: 220 13% 88%; --input: 220 13% 88%; --ring: 220 90% 50%; } :root { /* ---- Typography ---- */ --font-family: "Inter", system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --font-300: 300; --font-400: 400; --font-500: 500; --font-600: 600; --font-700: 700; --font-800: 800; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ---- Spacing ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; /* ---- Radius ---- */ --radius-sm: 0.5rem; --radius: 0.75rem; --radius-lg: 1rem; --radius-full: 9999px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.3); --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.4); --shadow-lg: 0 10px 30px hsl(0 0% 0% / 0.5); --shadow-glow-blue: 0 0 24px hsl(220 90% 56% / 0.2); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; /* ---- Brand gradients (verbatim from lp.moco.inc) ---- */ --gradient-primary: linear-gradient(135deg, #2a6df4, #3030e8); --gradient-brand: linear-gradient(135deg, #2a6df4, #4f30e8); /* ---- Layout ---- */ --sidebar-width: 240px; --container-max: 1400px; } /* Background radial-glow treatment matching lp.moco.inc, dark-tuned */ .app-bg { background: radial-gradient(ellipse at 20% 0%, hsl(220 30% 15% / 0.4) 0, transparent 60%), radial-gradient(ellipse at 80% 100%, hsl(260 30% 15% / 0.3) 0, transparent 60%), hsl(var(--background)); }