:root {
  /* GRAYS */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* BRAND */
  --blue-500:   #3b82f6;
  --blue-600:   #2563eb;
  --orange-500: #f97316;
  --orange-600: #ea580c;

  /* STATUS */
  --green-500:  #22c55e;
  --red-500:    #ef4444;

  /* PURE */
  --white: #ffffff;
  --black: #000000;
  --color-primary: var(--blue-500);
  --color-primary-dark: var(--blue-600);
  --color-accent: var(--orange-500);
  
  --danger: var(--red-500);
  --success: var(--green-500);

  --secondary: var(--orange-500);
  --secondary-dark: var(--orange-600);

  --bg-user-dropdown: var(--white);
  --user-dropdown-text-primary: var(--gray-900);


}


/* =========================================================
   LIGHT THEME
   ========================================================= */
:root[data-theme="light"] {
    
  /* ===== Header Theme ===== */
  
  /* Header */
  --header-bg: var(--white);
  --header-text: var(--gray-900);
  --header-shadow: rgba(0,0,0,.08);

  /* Top Bar */
  --header-top-bg: var(--gray-900);
  --header-top-text: var(--white);

  /* Search */
  --header-search-bg: var(--white);
  --header-search-border: var(--gray-200);
  --header-search-text: var(--gray-900);
  --header-search-placeholder: var(--gray-500);

  /* Dropdown */
  --header-dropdown-bg: var(--white);
  --header-dropdown-text: var(--gray-900);
  --header-dropdown-hover-bg: var(--gray-100);
  --header-dropdown-hover-text: var(--gray-900);
  
  --color-primary: var(--blue-500);
  --color-primary-dark: var(--blue-600);
  --color-accent: var(--orange-500);
  
}

/* =========================================================
   DARK THEME
   ========================================================= */
   
:root[data-theme="dark"] {
    
  /* ===== Header Theme ===== */
  
  /* Header */
  --header-bg: var(--gray-800);
  --header-text: var(--gray-50);
  --header-shadow: rgba(0,0,0,.4);

  /* Top Bar */
  --header-top-bg: var(--gray-200);
  --header-top-text: var(--gray-900);

  /* Search */
  --header-search-bg: var(--gray-800);
  --header-search-border: var(--gray-700);
  --header-search-text: var(--gray-50);
  --header-search-placeholder: var(--gray-400);

  /* Dropdown */
  --header-dropdown-bg: var(--gray-800);
  --header-dropdown-text: var(--gray-50);
  
  --header-dropdown-hover-bg: var(--gray-700);
  --header-dropdown-hover-text: var(--gray-50);

  --color-primary: var(--blue-600);
  --color-primary-dark: var(--blue-500);
  --color-accent: var(--orange-600);
  
  --bg-user-dropdown: var(--gray-800);
  --user-dropdown-text-primary: var(--gray-50);
  
}