/* ============================================================ Backlog — Design Tokens Single source of truth for all visual values. ============================================================ */ :root { /* ── Backgrounds ──────────────────────────────────────────── */ --bg-page: #09090b; /* near-black page canvas */ --bg-surface: #18181b; /* cards, panels */ --bg-elevated: #27272a; /* inputs, dropdowns, tooltips */ --bg-hover: #3f3f46; /* hover state on surfaces */ /* ── Borders ──────────────────────────────────────────────── */ --border: #27272a; --border-hover: #52525b; /* ── Text ─────────────────────────────────────────────────── */ --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; /* ── Accent (user-overridable via inline style on ) ─── */ --accent: #6366f1; /* indigo 500 */ --accent-light: #818cf8; /* indigo 400 — hover */ --accent-muted: rgba(99, 102, 241, 0.12); --accent-selection: rgba(99, 102, 241, 0.40); /* text selection highlight */ /* ── Status colours ───────────────────────────────────────── */ --status-planned: #3b82f6; /* blue */ --status-in-progress: #22c55e; /* green */ --status-on-hold: #f59e0b; /* amber */ --status-dropped: #ef4444; /* red */ --status-completed: #10b981; /* emerald */ --status-replaying: #a855f7; /* purple */ /* ── Semantic ─────────────────────────────────────────────── */ --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* ── Typography ───────────────────────────────────────────── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* ── Spacing ──────────────────────────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; /* ── Radii ────────────────────────────────────────────────── */ --r-sm: 0.25rem; --r-md: 0.5rem; --r-lg: 0.75rem; --r-xl: 1rem; --r-2xl: 1.5rem; --r-full: 9999px; /* ── Shadows ──────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 24px rgba(0,0,0,0.6); /* ── Transitions ──────────────────────────────────────────── */ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Layout ───────────────────────────────────────────────── */ --content-max: 1200px; --sidebar-w: 260px; --nav-h: 60px; }