/* dan-cp design tokens — authoritative source. * * Generated from agent/design/brand.md §1-4. Every value below * MUST match a token in brand.md. NEVER hard-code these values in * component CSS — always reference the token. * * Loading order: tokens.css FIRST in , before any other * stylesheet. This guarantees var() lookups resolve everywhere. */ /* ----- Surfaces (dark theme — the default) ------------------- */ :root { --surface-0: #0a0e1a; --surface-1: #111827; --surface-2: #1f2937; --surface-3: #374151; --surface-overlay: rgba(15, 23, 42, 0.85); --sidebar-overlay: rgba(0, 0, 0, 0.6); /* ----- Text ----- */ --text-strong: #f9fafb; --text: #d1d5db; --text-muted: #9ca3af; --text-subtle: #6b7280; --text-on-accent: #ffffff; /* ----- Brand accent (indigo) ----- */ --accent: #6366f1; --accent-hover: #4f46e5; --accent-active: #4338ca; --accent-soft: rgba(99, 102, 241, 0.12); --accent-shadow: rgba(99, 102, 241, 0.4); /* ----- Semantic ----- */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; --error-soft: rgba(239, 68, 68, 0.12); --severity-high: #f97316; /* orange-500 — high severity text/border */ --severity-high-soft: rgba(249, 115, 22, 0.12); /* background tint */ --success-soft: rgba(16, 185, 129, 0.12); --success-lighter: rgba(16, 185, 129, 0.06); --warning-soft: rgba(245, 158, 11, 0.12); --info-soft: rgba(59, 130, 246, 0.12); --success-dark: #059669; --error-dark: #dc2626; /* Chart palette — used by Chart.js configs via getCSSVar() */ --chart-purple: #8b5cf6; --chart-pink: #ec4899; /* Badge "on" state — dark forest green, distinct from --success */ --badge-on-surface: rgba(20, 83, 45, 0.4); --badge-on-border-color: rgba(22, 101, 52, 0.5); /* Platform badge colors */ --platform-reddit-bg: rgba(245, 158, 11, 0.18); --platform-hn-bg: rgba(245, 158, 11, 0.22); /* ----- Phase chip colors ----- */ --phase-research-bg: rgba(59, 130, 246, 0.18); --phase-research-text: #93c5fd; --phase-validate-bg: rgba(245, 158, 11, 0.18); --phase-validate-text: #fcd34d; --phase-build-bg: rgba(168, 85, 247, 0.18); --phase-build-text: #d8b4fe; --phase-launch-bg: rgba(16, 185, 129, 0.18); --phase-launch-text: #6ee7b7; --phase-monitor-bg: rgba(20, 184, 166, 0.18); --phase-monitor-text: #5eead4; --phase-killed-bg: rgba(239, 68, 68, 0.18); --phase-killed-text: #fca5a5; /* ----- Typography ----- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --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; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* ----- Font weights ----- */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ----- Spacing (4-point system) ----- */ --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; /* ----- Radii ----- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* ----- Shadows ----- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6); --shadow-focus: 0 0 0 3px var(--accent-soft); --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.3); /* ----- Page-level layout ----- */ --sidebar-width: 240px; --topbar-height: 56px; --card-max-auth: 420px; /* Login page gradient start color */ --login-gradient-start: #1e1b4b; /* Loading indicator */ --loading-gradient-violet: #a78bfa; /* ----- Motion ----- */ --transition-fast: 80ms ease; --transition-normal: 120ms ease; --transition-slow: 200ms ease; } /* prefers-reduced-motion: zero the motion tokens so var(--transition-*) consumers * get 0ms automatically. Component-specific selectors live in app.css (META-REVIEW-032). */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; } } /* ----- Reset + global baseline ----- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* literal fallback if var() unresolved */ font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); background: var(--surface-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--shadow-focus); } img, svg { display: block; max-width: 100%; } /* Skip-link: visually hidden until keyboard-focused (clip/offscreen pattern). */ .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; color: var(--text-strong); background: var(--surface-1); } .skip-link:focus-visible { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: var(--text-strong); background: var(--surface-1); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-focus); }