/* ──────────────────────────────────────────────────────────────────────── Showrunner — Design Tokens ──────────────────────────────────────────────────────────────────────── Brand: orange + cream. Light is default; dark is the optional alt mode (warm dark, not pure black). All values exposed as CSS custom properties so theme switching works at runtime via [data-theme] on . ──────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ── Brand orange — burnt, premium, not safety-cone ─────────────────── */ --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-200: #fed7aa; --brand-300: #fdba74; --brand-400: #fb923c; --brand-500: #ea580c; /* primary — burnt orange */ --brand-600: #c2410c; /* hover / pressed */ --brand-700: #9a3412; --brand-800: #7c2d12; --brand-900: #5c1d09; /* ── Status ─────────────────────────────────────────────────────────── */ --success-500: #16a34a; --success-600: #15803d; --success-bg: rgba(22, 163, 74, 0.12); --warning-500: #ca8a04; --warning-600: #a16207; --warning-bg: rgba(202, 138, 4, 0.14); --danger-500: #dc2626; --danger-600: #b91c1c; --danger-bg: rgba(220, 38, 38, 0.12); --info-500: #0d9488; --info-600: #0f766e; --info-bg: rgba(13, 148, 136, 0.12); /* ── Workflow phase accents (FIND/PITCH/BUILD/CLOSE/TRACK) ──────────── */ --phase-find: #0d9488; /* teal — complementary to orange */ --phase-pitch: #e11d48; /* rose — outreach, action */ --phase-build: #ea580c; /* brand orange — heart of the product */ --phase-close: #ca8a04; /* gold — money, closing */ --phase-track: #78716c; /* stone — back-office */ /* ── LIGHT mode tokens (DEFAULT) — warm cream + dark warm-brown text ── */ --canvas: #fbf6ea; /* main viewport — warm cream, paper-like */ --surface-1: #f4ead4; /* sidebar — slightly deeper cream */ --surface-2: #ffffff; /* cards — pure white pops on cream */ --surface-3: #ede0c4; /* hover, raised */ --surface-4: #ffffff; /* modal, popover */ --surface-overlay: rgba(28, 20, 16, 0.45); --border: #e8dec8; --border-strong: #d9caa7; --border-focus: var(--brand-500); --text-1: #1c1410; /* very dark warm brown — never pure black */ --text-2: #3d2f1f; --text-3: #6b5a3e; --text-4: #9a8765; --text-disabled: #bba784; --text-inverse: #fbf6ea; /* Soft, warm shadows (no cool blue tint) */ --shadow-xs: 0 1px 2px rgba(120, 70, 20, 0.06); --shadow-sm: 0 2px 4px rgba(120, 70, 20, 0.08), 0 1px 2px rgba(120, 70, 20, 0.05); --shadow-md: 0 8px 16px rgba(120, 70, 20, 0.10), 0 2px 4px rgba(120, 70, 20, 0.06); --shadow-lg: 0 20px 40px rgba(120, 70, 20, 0.12), 0 8px 16px rgba(120, 70, 20, 0.08); --shadow-xl: 0 32px 64px rgba(120, 70, 20, 0.16), 0 16px 32px rgba(120, 70, 20, 0.10); /* ── Typography ─────────────────────────────────────────────────────── */ --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; --text-5xl: 44px; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ── Spacing (4px base) ─────────────────────────────────────────────── */ --space-0: 0; --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; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Border radius ──────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ── Motion ─────────────────────────────────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* ── Layout ─────────────────────────────────────────────────────────── */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; --container-max: 1400px; --content-max: 960px; /* ── Z-index scale ──────────────────────────────────────────────────── */ --z-base: 1; --z-elevated: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-command: 60; } /* ── DARK mode (optional, warm) ───────────────────────────────────────── */ [data-theme="dark"] { --canvas: #1c1410; /* warm dark brown, not pure black */ --surface-1: #211814; --surface-2: #2a1f18; --surface-3: #34281f; --surface-4: #3a2e23; --surface-overlay: rgba(0, 0, 0, 0.65); --border: #3a2e23; --border-strong: #50402f; --text-1: #fbf6ea; --text-2: #e8dec8; --text-3: #b8a684; --text-4: #8a7857; --text-disabled: #5a4b35; --text-inverse: #1c1410; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4); --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.7), 0 16px 32px rgba(0, 0, 0, 0.5); } /* ── Reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-1); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; display: block; } ul, ol { list-style: none; padding: 0; margin: 0; } input, textarea { outline: none; } ::selection { background: var(--brand-500); color: white; } /* Force the HTML5 [hidden] attribute to actually hide, regardless of any later display rule (flex/grid/block) that would otherwise override it. */ [hidden] { display: none !important; } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }