:root {
  --color-brand-red: #82152c;
  --color-brand-red-light: #a01d3a;
  --color-brand-red-dark: #6b1124;
  --color-brand-red-hover: #9a1a35;
  --color-brand-gold: #FAC761;
  --color-brand-gold-muted: #c9a44a;
  --color-brand-dark: #0e0e14;
  --color-brand-wheat: #F9E9D2;
  --color-brand-sand: #F7D18F;
  --color-brand-crimson: #4E0C17;
  --color-brand-oxblood: #28070E;

  --color-brand-red-5: rgba(130, 21, 44, 0.05);
  --color-brand-red-8: rgba(130, 21, 44, 0.08);
  --color-brand-red-10: rgba(130, 21, 44, 0.1);
  --color-brand-red-15: rgba(130, 21, 44, 0.15);
  --color-brand-red-20: rgba(130, 21, 44, 0.2);
  --color-brand-red-25: rgba(130, 21, 44, 0.25);
  --color-brand-red-30: rgba(130, 21, 44, 0.3);
  --color-brand-red-40: rgba(130, 21, 44, 0.4);
  --color-brand-red-50: rgba(130, 21, 44, 0.5);
  --color-brand-red-60: rgba(130, 21, 44, 0.6);

  --color-brand-oxblood-10: rgba(40, 7, 14, 0.1);
  --color-brand-oxblood-15: rgba(40, 7, 14, 0.15);
  --color-brand-oxblood-20: rgba(40, 7, 14, 0.2);
  --color-brand-oxblood-30: rgba(40, 7, 14, 0.3);
  --color-brand-crimson-10: rgba(78, 12, 23, 0.1);
  --color-brand-crimson-15: rgba(78, 12, 23, 0.15);
  --color-brand-crimson-20: rgba(78, 12, 23, 0.2);
  --color-brand-crimson-30: rgba(78, 12, 23, 0.3);

  --color-impact-critical: #ef4444;
  --color-impact-critical-bg: rgba(239, 68, 68, 0.15);
  --color-impact-critical-border: rgba(239, 68, 68, 0.3);
  --color-impact-critical-text: #fca5a5;
  --color-impact-high: #f97316;
  --color-impact-high-bg: rgba(249, 115, 22, 0.15);
  --color-impact-high-border: rgba(249, 115, 22, 0.3);
  --color-impact-high-text: #fdba74;
  --color-impact-medium: #eab308;
  --color-impact-medium-bg: rgba(234, 179, 8, 0.15);
  --color-impact-medium-border: rgba(234, 179, 8, 0.3);
  --color-impact-medium-text: #fde68a;
  --color-impact-low: #22c55e;
  --color-impact-low-bg: rgba(34, 197, 94, 0.15);
  --color-impact-low-border: rgba(34, 197, 94, 0.3);
  --color-impact-low-text: #86efac;

  --color-success: #22c55e;
  --color-success-alt: #10b981;
  --color-success-bg: rgba(34, 197, 94, 0.12);
  --color-success-border: rgba(34, 197, 94, 0.2);
  --color-warning: #f59e0b;
  --color-warning-alt: #eab308;
  --color-warning-gold: #fbbf24;
  --color-warning-bg: rgba(234, 179, 8, 0.12);
  --color-warning-border: rgba(234, 179, 8, 0.2);
  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.12);
  --color-danger-border: rgba(239, 68, 68, 0.2);
  --color-danger-text: #fca5a5;
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-lighter: #93c5fd;
  --color-info-bg: rgba(59, 130, 246, 0.15);
  --color-info-border: rgba(59, 130, 246, 0.3);

  --color-bg-body: #0a0a0e;
  --color-bg-deep: #0b0b0f;
  --color-bg-surface-1: rgba(14, 14, 20, 0.99);
  --color-bg-surface-2: rgba(14, 14, 20, 0.95);
  --color-bg-surface-3: rgba(24, 24, 32, 0.8);
  --color-bg-surface-4: rgba(36, 36, 44, 0.5);
  --color-bg-surface-5: rgba(36, 36, 44, 0.6);
  --color-bg-card: rgba(20, 20, 28, 0.45);
  --color-bg-input: #111116;
  --color-bg-overlay: rgba(8, 8, 12, 0.75);
  --color-bg-overlay-heavy: rgba(8, 8, 12, 0.85);
  --color-bg-scrim: rgba(0, 0, 0, 0.5);

  --color-text-primary: #f3f3f3;
  --color-text-heading: #e4e4e7;
  --color-text-secondary: #d4d4d8;
  --color-text-muted: #a1a1aa;
  --color-text-dim: #71717a;
  --color-text-faint: #52525b;
  --color-text-ghost: #3f3f46;
  --color-text-accent: #F7D18F;
  --color-text-meta: #9aa0b0;
  --color-text-label: #8b8fa3;

  --color-border-primary: rgba(90, 90, 100, 0.3);
  --color-border-secondary: rgba(65, 65, 75, 0.3);
  --color-border-subtle: rgba(65, 65, 75, 0.15);
  --color-border-faint: rgba(65, 65, 75, 0.08);
  --color-border-strong: rgba(65, 65, 75, 0.5);
  --color-border-accent: rgba(130, 21, 44, 0.15);
  --color-border-accent-medium: rgba(130, 21, 44, 0.3);
  --color-border-accent-strong: rgba(130, 21, 44, 0.5);
  --color-border-admin: #222228;
  --color-border-white-5: rgba(255, 255, 255, 0.05);
  --color-border-white-6: rgba(255, 255, 255, 0.06);
  --color-border-white-10: rgba(255, 255, 255, 0.1);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --text-2xs: 0.5625rem;
  --text-xs: 0.625rem;
  --text-sm: 0.6875rem;
  --text-base: 0.75rem;
  --text-md: 0.8125rem;
  --text-lg: 0.875rem;
  --text-xl: 1rem;
  --text-2xl: 1.125rem;
  --text-3xl: 1.25rem;
  --text-4xl: 1.5rem;
  --text-5xl: 2rem;

  --text-px-9: 9px;
  --text-px-10: 10px;
  --text-px-11: 11px;
  --text-px-12: 12px;
  --text-px-13: 13px;
  --text-px-14: 14px;
  --text-px-16: 16px;
  --text-px-18: 18px;
  --text-px-20: 20px;
  --text-px-24: 24px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.5px;
  --tracking-wider: 0.8px;
  --tracking-widest: 1.2px;
  --tracking-ultra: 1.5px;
  --tracking-display: 2px;

  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-base: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-full: 50%;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-brand-sm: 0 2px 8px rgba(130, 21, 44, 0.3);
  --shadow-brand-md: 0 4px 12px rgba(130, 21, 44, 0.4);
  --shadow-brand-lg: 0 4px 16px rgba(130, 21, 44, 0.4);
  --shadow-glow: 0 0 8px rgba(130, 21, 44, 0.1);
  --shadow-sidebar: 4px 0 30px rgba(0, 0, 0, 0.7), 1px 0 0 rgba(130, 21, 44, 0.05);
  --shadow-sidebar-right: -4px 0 20px rgba(0, 0, 0, 0.4);
  --shadow-header: 0 2px 16px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(130, 21, 44, 0.08);
  --shadow-none: none;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 800;
  --z-leaflet: 800;
  --z-sidebar: 900;
  --z-panel: 950;
  --z-widget: 999;
  --z-modal-content: 1000;
  --z-sidebar-high: 1100;
  --z-header: 1300;
  --z-overlay: 2000;
  --z-toast: 9999;
  --z-modal: 10000;
  --z-modal-above: 10001;
  --z-supreme: 99999;
  --z-critical: 100000;

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-spring: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  --header-height: 42px;
  --tab-strip-height: 0px;
  --filter-bar-height: 36px;
  --header-and-tabs: var(--header-height);
  --total-header-height: calc(var(--header-height) + var(--filter-bar-height));
  --sidebar-width: 340px;
  --watch-panel-width: 380px;
  --chat-panel-width: 400px;
  --profile-sidebar-width: 480px;

  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  --mobile-bottom-nav-height: 0px;
  --mobile-touch-min: 44px;
  --mobile-sheet-radius: 16px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 48px;
    --filter-bar-height: 0px;
    --total-header-height: var(--header-height);
    --sidebar-width: 100%;
    --mobile-bottom-nav-height: 60px;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --header-height: 38px;
    --mobile-bottom-nav-height: 48px;
  }
}