/* =========================================================
   LogKeeper — CSS Design Tokens
   ========================================================= */
:root {
  /* Brand */
  --lk-primary: #0f766e;
  --lk-primary-hover: #115e59;
  --lk-primary-rgb: 15, 118, 110;
  --lk-accent: #2563eb;
  --lk-accent-rgb: 37, 99, 235;

  /* Sidebar */
  --lk-sidebar-bg: #0b1e2d;
  --lk-sidebar-text: #9fb2c5;
  --lk-sidebar-text-active: #ffffff;
  --lk-sidebar-item-hover-bg: rgba(255,255,255,0.06);
  --lk-sidebar-item-active-bg: rgba(37,99,235,0.20);
  --lk-sidebar-item-active-border: #2563eb;
  --lk-sidebar-border: #1f3345;
  --lk-sidebar-width: 240px;
  --lk-sidebar-collapsed-width: 64px;
  --lk-sidebar-logo-height: 60px;

  /* Topbar */
  --lk-topbar-bg: rgba(255,255,255,0.84);
  --lk-topbar-border: #dbe5ee;
  --lk-topbar-height: 60px;

  /* Content */
  --lk-body-bg: #f2f7fb;
  --lk-body-bg-alt: #eaf1f7;
  --lk-card-bg: #ffffff;
  --lk-card-border: #dbe5ee;
  --lk-card-shadow: 0 4px 12px rgba(7, 29, 57, 0.08);
  --lk-card-shadow-hover: 0 8px 24px rgba(7, 29, 57, 0.14);

  /* Typography */
  --lk-text-primary: #132134;
  --lk-text-secondary: #4b5f75;
  --lk-text-muted: #7c8da1;
  --lk-font-sans: 'Manrope', 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --lk-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Severity */
  --lk-severity-debug: #6b7280;
  --lk-severity-info: #3b82f6;
  --lk-severity-warning: #f59e0b;
  --lk-severity-error: #ef4444;
  --lk-severity-critical: #7c3aed;

  --lk-severity-debug-bg: #f3f4f6;
  --lk-severity-info-bg: #eff6ff;
  --lk-severity-warning-bg: #fffbeb;
  --lk-severity-error-bg: #fef2f2;
  --lk-severity-critical-bg: #f5f3ff;

  --lk-severity-debug-border: #d1d5db;
  --lk-severity-info-border: #bfdbfe;
  --lk-severity-warning-border: #fde68a;
  --lk-severity-error-border: #fecaca;
  --lk-severity-critical-border: #ddd6fe;

  /* Incident Status */
  --lk-status-open: #ef4444;
  --lk-status-open-bg: #fef2f2;
  --lk-status-investigating: #f59e0b;
  --lk-status-investigating-bg: #fffbeb;
  --lk-status-resolved: #22c55e;
  --lk-status-resolved-bg: #f0fdf4;
  --lk-status-closed: #6b7280;
  --lk-status-closed-bg: #f9fafb;

  /* Ticket Priority */
  --lk-priority-low: #22c55e;
  --lk-priority-low-bg: #f0fdf4;
  --lk-priority-medium: #3b82f6;
  --lk-priority-medium-bg: #eff6ff;
  --lk-priority-high: #f59e0b;
  --lk-priority-high-bg: #fffbeb;
  --lk-priority-critical: #ef4444;
  --lk-priority-critical-bg: #fef2f2;

  /* Ticket Status */
  --lk-tstatus-open: #3b82f6;
  --lk-tstatus-inprogress: #f59e0b;
  --lk-tstatus-pending: #8b5cf6;
  --lk-tstatus-resolved: #22c55e;
  --lk-tstatus-closed: #6b7280;
  --lk-tstatus-cancelled: #9ca3af;

  /* Borders & Radius */
  --lk-radius-xs: 3px;
  --lk-radius-sm: 5px;
  --lk-radius: 8px;
  --lk-radius-lg: 12px;
  --lk-radius-xl: 16px;
  --lk-radius-full: 9999px;

  /* Transitions */
  --lk-transition-fast: 120ms ease;
  --lk-transition: 200ms ease;
  --lk-transition-slow: 350ms ease;

  /* Z-indexes */
  --lk-z-sidebar: 100;
  --lk-z-topbar: 90;
  --lk-z-overlay: 95;
  --lk-z-modal: 1050;
  --lk-z-toast: 9999;

  /* Scrollbar */
  --lk-scrollbar-w: 5px;
  --lk-scrollbar-thumb: #b9c8d6;
  --lk-scrollbar-track: transparent;
}

/* Thin scrollbar */
::-webkit-scrollbar { width: var(--lk-scrollbar-w); height: var(--lk-scrollbar-w); }
::-webkit-scrollbar-thumb { background: var(--lk-scrollbar-thumb); border-radius: var(--lk-radius-full); }
::-webkit-scrollbar-track { background: var(--lk-scrollbar-track); }