/* =========================================
   HALA CCC Docking App - Design System
   ========================================= */

:root {
  /* ===== Color Palette ===== */

  /* Sidebar & Navigation */
  --sidebar-bg: #1e2a3b;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #ffffff;
  --sidebar-active-bg: #3b82f6;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  /* Canvas & Surfaces */
  --canvas-bg: #f8fafc;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --card-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
  --card-radius: 12px;
  --card-radius-sm: 8px;

  /* Status Colors - Semantic */
  --status-green: #22c55e;
  --status-green-bg: #dcfce7;
  --status-green-text: #166534;

  --status-amber: #f59e0b;
  --status-amber-bg: #fef3c7;
  --status-amber-text: #92400e;

  --status-red: #ef4444;
  --status-red-bg: #fee2e2;
  --status-red-text: #991b1b;

  --status-blue: #3b82f6;
  --status-blue-bg: #dbeafe;
  --status-blue-text: #1e40af;

  --status-grey: #6b7280;
  --status-grey-bg: #f3f4f6;
  --status-grey-text: #374151;

  --status-purple: #8b5cf6;
  --status-purple-bg: #ede9fe;
  --status-purple-text: #5b21b6;

  /* Text Colors */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;

  /* Movement Types */
  --inbound-color: #0ea5e9;
  /* Sky Blue */
  --inbound-bg: #e0f2fe;
  --outbound-color: #f97316;
  /* Orange */
  --outbound-bg: #ffedd5;
  --blocked-color: #ef4444;
  --blocked-bg: #fee2e2;

  /* Warehouse Tags */
  --wh-a-bg: #dcfce7;
  --wh-a-text: #166534;
  --wh-b-bg: #dbeafe;
  --wh-b-text: #1e40af;
  --wh-c-bg: #fef3c7;
  --wh-c-text: #b45309;
  --wh-d-bg: #f3e8ff;
  --wh-d-text: #6b21a8;

  /* Border Colors */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;

  /* ===== Typography ===== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-xs: 0.6875rem;
  /* 11px */
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-base: 0.8125rem;
  /* 13px */
  --font-size-md: 0.875rem;
  /* 14px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-size-xl: 1.125rem;
  /* 18px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* ===== Spacing ===== */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */

  /* ===== Layout ===== */
  --sidebar-width: 200px;
  --topbar-height: 56px;
  --drawer-width: 420px;

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ===== Z-Index ===== */
  --z-sidebar: 100;
  --z-topbar: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--canvas-bg);
}

a {
  color: var(--status-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ===== Utility Classes ===== */
.text-green {
  color: var(--status-green) !important;
}

.text-amber {
  color: var(--status-amber) !important;
}

.text-red {
  color: var(--status-red) !important;
}

.text-blue {
  color: var(--status-blue) !important;
}

.text-grey {
  color: var(--status-grey) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-xs {
  font-size: var(--font-size-xs);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.hidden {
  display: none !important;
}