/* ============================================================ Budget Command — Design Tokens (v2) Theme: LIGHT (single theme, no dark mode). Ported verbatim from the design handoff's design-tokens.css — the authoritative source of truth for colors, type, radii, shadows. ============================================================ */ :root { /* ---------- Surfaces / backgrounds ---------- */ --bc-app-bg: #F7F8FA; --bc-surface: #ffffff; --bc-surface-muted: #FAFBFC; --bc-chip-bg: #F1F3F6; --bc-hover-bg: #F7F8FA; /* Dark navigation sidebar (the ONLY dark surface in the app) */ --bc-nav-bg: #0B0F1E; --bc-nav-divider: #1F2937; --bc-nav-avatar-bg: #1E293B; /* ---------- Borders ---------- */ --bc-border: #E2E8F0; --bc-border-soft: #E9EDF2; --bc-border-faint: #EEF1F5; --bc-border-cell: #F1F3F6; --bc-border-hover: #CBD5E1; /* ---------- Text ---------- */ --bc-text: #0B0F1E; --bc-text-2: #475569; --bc-text-muted: #64748B; --bc-text-faint: #94A3B8; /* ---------- Brand / accent (teal-green) ---------- */ --bc-primary: #14B88A; --bc-primary-strong:#0F8F6C; --bc-primary-tint: #E5FAF2; --bc-primary-wash: #F0FBF6; --bc-primary-ring: rgba(20,184,138,.12); --bc-primary-line: #CFEDE3; /* Logo gradient + secondary accent */ --bc-logo-from: #2ED4A5; --bc-logo-to: #A78BFA; --bc-live-dot: #10B981; --bc-nav-active-tint: rgba(46,212,165,.13); --bc-nav-active-bar: #2ED4A5; --bc-nav-active-txt: #6EE7B7; /* ---------- Tier accents (Hierarchy Guide) ---------- */ --bc-tier1-bg: #E5FAF2; --bc-tier1-fg: #0F8F6C; /* Company / Entity (teal) */ --bc-tier2-bg: #EEF5FF; --bc-tier2-fg: #2563EB; /* Dept/Product/Region (blue) */ --bc-tier3-bg: #EDE9FE; --bc-tier3-fg: #7C3AED; /* Team / Project (violet) */ /* ---------- Status ---------- */ --bc-danger: #EF4444; --bc-danger-text: #B42318; --bc-danger-bg: #FEECEC; --bc-danger-border: #FED7D7; --bc-danger-star: #DC2626; --bc-info-bg: #EEF5FF; --bc-info-bar: #2563EB; /* ---------- Radii ---------- */ --bc-r-sm: 6px; --bc-r-md: 8px; --bc-r-lg: 9px; --bc-r-xl: 10px; --bc-r-2xl: 12px; --bc-r-card:16px; --bc-r-pill:999px; /* ---------- Shadows ---------- */ --bc-shadow-menu: 0 12px 32px rgba(11,15,30,.16); --bc-shadow-pop: 0 18px 48px rgba(11,15,30,.18); --bc-shadow-modal: 0 30px 90px rgba(11,15,30,.30); --bc-shadow-wizard: 0 40px 100px rgba(11,15,30,.35); --bc-scrim: rgba(11,15,30,.45); /* ---------- Typography ---------- */ --bc-font-ui: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bc-font-mono:'JetBrains Mono', monospace; } /* Cost-type colours (from the design's costColor map, Line Item Templates) */ :root { --bc-cost-labor: #2563EB; --bc-cost-material: #14B88A; --bc-cost-overhead: #7C3AED; --bc-cost-capex: #B45309; --bc-cost-revenue: #EF4444; } @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .3 } } @keyframes popin { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } } /* drag ghost that follows the cursor while dragging a hierarchy node (appended to ) */ .bc-drag-ghost { position: fixed; z-index: 9999; pointer-events: none; padding: 5px 11px; border-radius: var(--bc-r-md, 8px); background: var(--bc-nav-bg, #0B0F1E); color: #fff; font-family: var(--bc-font-ui); font-size: 12px; font-weight: 600; box-shadow: 0 8px 24px rgba(11, 15, 30, .28); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bc-tree-dragging { cursor: grabbing !important; } body.bc-tree-dragging * { cursor: grabbing !important; user-select: none !important; }