/**
 * Flow Z Go — Design Tokens & Variables
 * Theme: Dark Futuristic Enterprise Logistics SaaS
 * Aesthetic: Clean, spacious, premium, midnight blue base with cyan/blue/purple accents.
 */

:root {
  /* Surface / Background Palette (Sky-White Theme: أبيض سماوي) */
  --bg-primary: #f0f6fc;      /* Clean sky-white luminous background */
  --bg-secondary: #ffffff;    /* Card & container crisp white */
  --bg-card: #ffffff;         /* Standard card background */
  --bg-tertiary: #f8fafc;     /* Hover & elevated card background */
  --bg-elevated: #ffffff;     /* Dropdowns, modals, top navigation */
  --bg-glass: rgba(255, 255, 255, 0.92);
  --bg-glass-card: rgba(255, 255, 255, 0.96);
  --bg-glass-modal: rgba(255, 255, 255, 0.98);
  --bg-overlay: rgba(15, 23, 42, 0.5);

  /* Primary Brand Accents */
  --accent-cyan: #0284c7;
  --accent-cyan-light: #38bdf8;
  --accent-cyan-dark: #0369a1;
  --accent-cyan-glow: rgba(2, 132, 199, 0.25);
  --accent-cyan-subtle: rgba(2, 132, 199, 0.08);

  --accent-blue: #2563eb;
  --accent-blue-light: #3b82f6;
  --accent-blue-glow: rgba(37, 99, 235, 0.25);

  --accent-purple: #9333ea;
  --accent-purple-light: #a855f7;
  --accent-purple-glow: rgba(147, 51, 234, 0.25);
  --accent-purple-subtle: rgba(168, 85, 247, 0.08);

  /* Gradients */
  --grad-cyan-blue: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  --grad-blue-purple: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);
  --grad-cyan-purple: linear-gradient(135deg, #0284c7 0%, #8a2be2 100%);
  --grad-purple-pink: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
  --grad-card-border: linear-gradient(135deg, rgba(2, 132, 199, 0.3) 0%, rgba(147, 51, 234, 0.2) 50%, rgba(0, 0, 0, 0.05) 100%);
  --grad-hero-overlay: linear-gradient(180deg, rgba(240, 246, 252, 0.2) 0%, rgba(240, 246, 252, 0.95) 100%);

  /* Borders & Dividers */
  --border-color: #cbd5e1;
  --border-input: #cbd5e1;
  --border-input-hover: #0284c7;
  --border-input-focus: #0284c7;
  --border-input-error: #EF4444;
  --border-input-success: #10B981;
  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-cyan: rgba(2, 132, 199, 0.45);
  --border-purple: rgba(168, 85, 247, 0.35);
  --border-glow-cyan: 0 0 15px rgba(2, 132, 199, 0.2);
  --border-glow-purple: 0 0 15px rgba(168, 85, 247, 0.2);

  /* Input Styling System */
  --input-bg: #ffffff;
  --input-bg-alt: #f8fafc;
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --input-label: #334155;

  /* Typography / Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --text-cyan: #0284c7;
  --text-purple: #7e22ce;


  /* Status Colors */
  --status-new-bg: rgba(59, 130, 246, 0.15);
  --status-new-text: #60a5fa;
  --status-new-border: rgba(59, 130, 246, 0.3);

  --status-branch-bg: rgba(147, 51, 234, 0.15);
  --status-branch-text: #c084fc;
  --status-branch-border: rgba(147, 51, 234, 0.3);

  --status-driver-bg: rgba(0, 240, 255, 0.15);
  --status-driver-text: #00f0ff;
  --status-driver-border: rgba(0, 240, 255, 0.3);

  --status-delivered-bg: rgba(16, 185, 129, 0.15);
  --status-delivered-text: #34d399;
  --status-delivered-border: rgba(16, 185, 129, 0.3);

  --status-delayed-bg: rgba(245, 158, 11, 0.15);
  --status-delayed-text: #fbbf24;
  --status-delayed-border: rgba(245, 158, 11, 0.3);

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

  --status-action-bg: rgba(236, 72, 153, 0.15);
  --status-action-text: #f472b6;
  --status-action-border: rgba(236, 72, 153, 0.3);

  --status-accounting-bg: rgba(139, 92, 246, 0.15);
  --status-accounting-text: #a78bfa;
  --status-accounting-border: rgba(139, 92, 246, 0.3);

  /* Shadows & Glows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-cyan-glow: 0 4px 25px rgba(0, 240, 255, 0.25);
  --shadow-purple-glow: 0 4px 25px rgba(147, 51, 234, 0.25);
  --shadow-primary-btn: 0 4px 20px rgba(0, 240, 255, 0.35);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Typography */
  --font-arabic: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-latin: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}