/*
 * Cheffin Admin - Color System
 * All colors centralized for easy maintenance
 */

:root {
  /* ===== Brand Colors ===== */
  --color-primary: #FF750F;          /* Orange - Main brand color */
  --color-primary-dark: #f53003;     /* Darker orange */
  --color-admin: #2b828b;            /* Teal/Cyan - Admin theme */
  --color-admin-light: #2c8183;      /* Lighter teal variant */
  --color-admin-dark: #246f77;       /* Darker teal variant */

  /* ===== Status Colors ===== */
  --color-success: #10b981;          /* Green - Success states */
  --color-success-light: #4ade80;    /* Light green */
  --color-success-dark: #047857;     /* Dark green */
  --color-success-bg: #dcfce7;       /* Green background */
  --color-danger: #ef4444;           /* Red - Danger/error */
  --color-danger-dark: #dc2626;      /* Dark red */
  --color-danger-light: #f87171;     /* Light red */
  --color-danger-lighter: #fca5a5;   /* Lighter red */
  --color-danger-bg: #fee2e2;        /* Red background */
  --color-warning: #f59e0b;          /* Orange - Warnings */
  --color-warning-light: #fbbf24;    /* Light orange */
  --color-warning-dark: #d97706;     /* Dark orange */
  --color-warning-bg: #fef3c7;       /* Orange background */
  --color-yellow: #eab308;           /* Yellow */
  --color-info: #3b82f6;             /* Blue - Info messages */
  --color-info-light: #60a5fa;       /* Light blue */
  --color-info-dark: #1e40af;        /* Dark blue */
  --color-info-bg: #dbeafe;          /* Blue background */

  /* ===== Neutral/Gray Colors ===== */
  --color-black: #000000;
  --color-black-soft: #0a0a0a;
  --color-gray-darkest: #1b1b18;     /* Almost black */
  --color-gray-darker: #161615;
  --color-gray-dark: #1b242d;        /* Sidebar/header */
  --color-gray-900: #111827;         /* Very dark gray */
  --color-gray-800: #1f2937;         /* Dark gray */
  --color-gray-700: #374151;         /* Medium-dark gray */
  --color-gray-600: #4b5563;         /* Medium gray */
  --color-gray-500: #6b7280;         /* Medium-light gray */
  --color-gray-400: #9ca3af;         /* Light-medium gray */
  --color-gray-300: #d1d5db;         /* Light gray */
  --color-gray-200: #e5e7eb;         /* Very light gray */
  --color-gray-100: #f3f4f6;         /* Almost white gray */
  --color-gray-50: #f9fafb;          /* Near white */
  --color-white-soft: #fdfdfc;
  --color-white: #ffffff;

  /* ===== Blue Variants ===== */
  --color-blue-900: #1e3a8a;
  --color-blue-800: #1e40af;
  --color-blue-700: #1d4ed8;
  --color-blue-600: #2563eb;
  --color-blue-500: #3b82f6;
  --color-blue-400: #60a5fa;
  --color-blue-300: #93c5fd;
  --color-blue-200: #bfdbfe;
  --color-blue-100: #dbeafe;
  --color-blue-50: #eff6ff;

  /* ===== Green Variants ===== */
  --color-green-900: #14532d;
  --color-green-800: #166534;
  --color-green-700: #15803d;
  --color-green-600: #16a34a;
  --color-green-500: #22c55e;
  --color-green-400: #4ade80;
  --color-green-300: #86efac;
  --color-green-200: #bbf7d0;
  --color-green-100: #dcfce7;
  --color-green-50: #f0fdf4;

  /* ===== Red Variants ===== */
  --color-red-900: #7f1d1d;
  --color-red-800: #991b1b;
  --color-red-700: #b91c1c;
  --color-red-600: #dc2626;
  --color-red-500: #ef4444;
  --color-red-400: #f87171;
  --color-red-300: #fca5a5;
  --color-red-200: #fecaca;
  --color-red-100: #fee2e2;
  --color-red-50: #fef2f2;

  /* ===== Yellow Variants ===== */
  --color-yellow-900: #713f12;
  --color-yellow-800: #854d0e;
  --color-yellow-700: #a16207;
  --color-yellow-600: #ca8a04;
  --color-yellow-500: #eab308;
  --color-yellow-400: #facc15;
  --color-yellow-300: #fde047;
  --color-yellow-200: #fef08a;
  --color-yellow-100: #fef9c3;
  --color-yellow-50: #fefce8;

  /* ===== Purple Variants ===== */
  --color-purple-900: #581c87;
  --color-purple-800: #6b21a8;
  --color-purple-700: #7c3aed;
  --color-purple-600: #9333ea;
  --color-purple-500: #a855f7;
  --color-purple-400: #c084fc;
  --color-purple-300: #d8b4fe;
  --color-purple-200: #e9d5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-50: #faf5ff;

  /* ===== Indigo Variants ===== */
  --color-indigo-900: #312e81;
  --color-indigo-800: #3730a3;
  --color-indigo-700: #4338ca;
  --color-indigo-600: #4f46e5;
  --color-indigo-500: #6366f1;
  --color-indigo-400: #818cf8;
  --color-indigo-300: #a5b4fc;
  --color-indigo-200: #c7d2fe;
  --color-indigo-100: #e0e7ff;
  --color-indigo-50: #eef2ff;

  /* ===== Background Colors ===== */
  --bg-primary: #ffffff;             /* Main white background */
  --bg-secondary: #f9fafb;           /* Light gray background */
  --bg-tertiary: #f3f4f6;            /* Medium light background */
  --bg-dark: #1b1b18;                /* Dark background */
  --bg-sidebar: #1b242d;             /* Sidebar background */
  --bg-header: #ffffff;              /* Header background */
  --bg-card: #ffffff;                /* Card backgrounds */
  --bg-hover: #f3f4f6;               /* Hover state */

  /* ===== Text Colors ===== */
  --text-primary: #111827;           /* Primary dark text */
  --text-secondary: #4b5563;         /* Secondary text */
  --text-tertiary: #6b7280;          /* Tertiary text */
  --text-muted: #9ca3af;             /* Muted text */
  --text-light: #f3f4f6;             /* Light text */
  --text-white: #ffffff;             /* White text */

  /* ===== Border Colors ===== */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-light: #f3f4f6;
  --border-dark: #374151;

  /* ===== Shadow Colors ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.1);

  /* ===== Overlay/Transparency Colors ===== */
  --overlay-white-10: rgba(255, 255, 255, 0.1);
  --overlay-white-15: rgba(255, 255, 255, 0.15);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-white-25: rgba(255, 255, 255, 0.25);

  /* ===== SweetAlert Button Colors ===== */
  --swal-confirm: #dc2626;      /* Danger color for confirm buttons */
  --swal-cancel: #6b7280;       /* Gray for cancel buttons */

  /* ===== Transparency Levels ===== */
  --opacity-20: 0.2;            /* 20% opacity (hex: 33) */
  --opacity-33: 0.33;           /* 33% opacity (hex: 55) */
  --opacity-80: 0.8;            /* 80% opacity (hex: cc) */

  /* ===== Transition/Animation ===== */
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;

  /* ===== Border Radius ===== */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* ===== Spacing ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

/* ===== Utility Classes ===== */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-sidebar {
  background-color: var(--bg-sidebar);
}

.bg-admin {
  background-color: var(--color-admin);
}

.text-primary {
  color: var(--text-primary);
}

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

.text-white {
  color: var(--text-white);
}

.text-admin {
  color: var(--color-admin);
}

.text-brand {
  color: var(--color-primary);
}

.border-primary {
  border-color: var(--border-primary);
}

.transition-normal {
  transition: var(--transition-normal);
}