:root {
  /* Primary Colors - Sophisticated Dark */
  --primary-color: #0f0f23; /* Rich Midnight */
  --primary-hover: #1a1a2e; /* Elegant Navy */
  --primary-light: #16213e; /* Refined Blue */
  --primary-dark: #0a0a14; /* Pure Black */

  /* Accent Colors - Premium Blue System */
  --accent-color: #4f46e5; /* Premium Indigo */
  --accent-hover: #4338ca; /* Deep Indigo */
  --accent-light: #6366f1; /* Bright Indigo */
  --accent-dark: #3730a3; /* Royal Indigo */

  /* Secondary Accent - Elegant Emerald */
  --secondary-accent: #059669; /* Premium Emerald */
  --secondary-hover: #047857; /* Deep Emerald */
  --secondary-light: #10b981; /* Bright Emerald */
  --secondary-dark: #065f46; /* Forest Emerald */

  /* Theme-specific Colors - Luxury Cargo Brand */
  --cargo-primary: #dc2626; /* Premium Red */
  --cargo-primary-hover: #b91c1c; /* Deep Red */
  --cargo-accent: #f59e0b; /* Golden Amber */
  --cargo-accent-hover: #d97706; /* Rich Amber */

  /* Neutral Colors - Clean Minimalist */
  --white: #ffffff;
  --off-white: #fefefe;
  --light-gray: #f8fafc;
  --medium-gray: #e2e8f0;
  --dark-gray: #64748b;
  --darker-gray: #475569;
  --text-gray: #1e293b;
  --muted-gray: #cbd5e1;
  --border-gray: #e2e8f0;
  --footer-text: #64748b;
  --footer-border: #f1f5f9;

  /* Additional Neutral Colors - Professional Scale */
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --light-border: #e2e8f0;
  --modal-backdrop: rgba(15, 15, 35, 0.8);
  --text-shadow: rgba(0, 0, 0, 0.25);
  --disabled-gray: #94a3b8;

  /* Semantic Colors - Refined Status System */
  --success-color: #22c55e; /* Clean Green */
  --success-hover: #16a34a; /* Deep Green */
  --error-color: #ef4444; /* Clean Red */
  --error-hover: #dc2626; /* Deep Red */
  --warning-color: #f59e0b; /* Warm Amber */
  --warning-hover: #d97706; /* Rich Amber */
  --info-color: #3b82f6; /* Clean Blue */
  --info-hover: #2563eb; /* Deep Blue */

  /* Background Colors - Sophisticated Surfaces */
  --bg-primary: var(--white);
  --bg-secondary: var(--off-white);
  --bg-dark: var(--primary-color);
  --bg-accent: var(--accent-color);
  --bg-glass: rgba(255, 255, 255, 0.08);
  --bg-card: rgba(255, 255, 255, 0.98);
  --bg-subtle: var(--light-gray);

  /* Text Colors - Perfect Contrast */
  --text-primary: var(--text-gray);
  --text-secondary: var(--darker-gray);
  --text-light: var(--white);
  --text-accent: var(--accent-color);
  --text-heading: var(--primary-color);
  --text-muted: var(--dark-gray);

  /* Border Colors - Clean Lines */
  --border-light: var(--light-gray);
  --border-medium: var(--medium-gray);
  --border-focus: var(--accent-color);
  --border-primary: var(--primary-color);
  --border-subtle: var(--neutral-200);

  /* Shadow Colors - Elegant Depth */
  --shadow-light: rgba(15, 15, 35, 0.04);
  --shadow-medium: rgba(15, 15, 35, 0.08);
  --shadow-dark: rgba(15, 15, 35, 0.16);
  --shadow-primary: rgba(15, 15, 35, 0.12);
  --shadow-accent: rgba(79, 70, 229, 0.25);
  --shadow-box: rgba(0, 0, 0, 0.05);
  --shadow-cargo-accent: rgba(220, 38, 38, 0.25);
  --shadow-cargo-accent-hover: rgba(220, 38, 38, 0.35);
  --cargo-pattern-overlay: rgba(79, 70, 229, 0.08);
  --shadow-smooth: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-elegant: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Gradient Colors - Sophisticated System */
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    #1a1a2e 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    var(--accent-color) 0%,
    #6366f1 100%
  );
  --gradient-hero: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    #16213e 100%
  );
  --gradient-card: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.95) 100%
  );
  --gradient-subtle: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(248, 250, 252, 0.8) 100%
  );
  --gradient-elegant: linear-gradient(135deg, #4f46e5 0%, #059669 100%);

  /* Interactive States - Smooth & Professional */
  --hover-lift: translateY(-2px);
  --hover-scale: scale(1.01);
  --hover-subtle: scale(1.005);
  --transition-fast: all 0.15s ease-out;
  --transition-normal: all 0.25s ease-in-out;
  --transition-slow: all 0.35s ease-in-out;
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme variables - Premium Dark Mode */
[data-theme="dark"] {
  --bg-primary: #0f0f23;
  --bg-secondary: #1a1a2e;
  --bg-card: rgba(26, 26, 46, 0.98);
  --bg-subtle: #16213e;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-light: #334155;
  --border-medium: #1e293b;
  --border-subtle: #293548;
  --shadow-box: rgba(79, 70, 229, 0.08);
  --shadow-elegant: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -2px rgba(0, 0, 0, 0.15);
}

/* Color utility classes (unchanged structure) */
.text-primary {
  color: var(--text-primary) !important;
}
.text-secondary {
  color: var(--text-secondary) !important;
}
.text-accent {
  color: var(--text-accent) !important;
}
.text-heading {
  color: var(--text-heading) !important;
}
.text-light {
  color: var(--text-light) !important;
}

.bg-primary {
  background-color: var(--bg-primary) !important;
}
.bg-secondary {
  background-color: var(--bg-secondary) !important;
}
.bg-dark {
  background-color: var(--bg-dark) !important;
}
.bg-accent {
  background-color: var(--bg-accent) !important;
}

.border-primary {
  border-color: var(--border-primary) !important;
}
.border-accent {
  border-color: var(--accent-color) !important;
}
.border-light {
  border-color: var(--border-light) !important;
}