:root {
  /* Brand and Theme Palette */
  --bg-primary: #0b0f14;
  --bg-secondary: #161b22;
  --bg-card: #1c2128;
  --bg-card-hover: #22272e;
  --bg-input: #0d1117;
  
  /* Borders and Dividers */
  --border-subtle: #30363d;
  --border-muted: #21262d;
  --border-focus: #58a6ff;

  /* Typography */
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --text-bright: #ffffff;

  /* Accent & Semantic Colors */
  --salcomp-red: #e11d48;
  --salcomp-red-hover: #be123c;
  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-cyan: #38bdf8;
  --accent-green: #22c55e;
  --accent-green-dark: #15803d;
  --accent-yellow: #eab308;
  --accent-yellow-dark: #a16207;
  --accent-red: #ef4444;
  --accent-red-dark: #b91c1c;

  /* Status Badges */
  --status-ok-bg: rgba(34, 197, 94, 0.15);
  --status-ok-border: #22c55e;
  --status-ok-text: #4ade80;

  --status-pending-bg: rgba(234, 179, 8, 0.15);
  --status-pending-border: #eab308;
  --status-pending-text: #fde047;

  --status-mismatch-bg: rgba(249, 115, 22, 0.15);
  --status-mismatch-border: #f97316;
  --status-mismatch-text: #fb923c;

  --status-missing-bg: rgba(239, 68, 68, 0.15);
  --status-missing-border: #ef4444;
  --status-missing-text: #f87171;

  /* Shadows and Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 15px rgba(37, 99, 235, 0.3);
}