/*
  SalaryX Pro – Color tokens (reference-matched)
  Palette: Neutral – Light theme

  Usage options:
    1) Add class "sx-theme-neutral" to <body> (recommended), OR
    2) Set attribute data-sx-theme="neutral" on <html> or <body>.

  This file only defines CSS custom properties (tokens). It does not change layout.
*/

:root[data-sx-theme="neutral"],
body[data-sx-theme="neutral"],
.sx-theme-neutral {
  /* --- Brand / Semantic (maps to existing SalaryX tokens used in style.css) --- */
  --sx-primary: #007ad9 !important;
  --sx-primary-dark: #0068b8 !important; /* hover */
  --sx-primary-active: #005598 !important;

  --sx-secondary: #657c8a !important;
  --sx-secondary-hover: #566975 !important;
  --sx-secondary-active: #475761 !important;

  --sx-success: #56a641 !important;
  --sx-success-hover: #498d37 !important;
  --sx-success-active: #3c742e !important;

  --sx-info: #2cacd5 !important;
  --sx-info-hover: #2592b5 !important;
  --sx-info-active: #1f7895 !important;

  --sx-warning: #f6bd30 !important;
  --sx-warning-hover: #d1a129 !important;
  --sx-warning-active: #ac8422 !important;

  --sx-danger: #d82a13 !important;
  --sx-danger-hover: #b82410 !important;
  --sx-danger-active: #971d0d !important;

  --sx-outline-hover-bg: rgba(0, 122, 217, .12) !important;
  --sx-focus-shadow: 0 0 0 .2rem #8dcdff !important;

  /* Sidebar contrast (light sidebar) */
  --sx-sidebar-bg: #ffffff !important;
  --sx-sidebar-border: #c8c8c8 !important;
  --sx-sidebar-text: #333333 !important;
  --sx-sidebar-muted: #333333 !important;
  --sx-sidebar-hover-bg: #eaeaea !important;
  --sx-sidebar-hover-text: #333333 !important;
  --sx-sidebar-active-bg: #eaeaea !important;
  --sx-sidebar-active-text: #333333 !important;
  --sx-sidebar-brand-bg: #ffffff !important;
  --sx-sidebar-brand-text: #007ad9 !important;
  --sx-sidebar-search-bg: #f4f4f4 !important;
  --sx-sidebar-search-text: #333333 !important;
  --sx-sidebar-search-placeholder: #848484 !important;
  --sx-sidebar-scroll-thumb: rgba(0,0,0,.18) !important;
  --sx-sidebar-scroll-thumb-hover: rgba(0,0,0,.32) !important;

  /* --- Text --- */
  --sx-text: #333333 !important;
  --sx-text-secondary: #848484 !important;
  --sx-text-on-primary: #ffffff !important;
  --sx-text-on-dark: #ffffff !important;

  /* --- Surfaces / backgrounds / borders --- */
  --sx-light: #ffffff !important;
  --sx-surface-ground: #f4f4f4 !important;
  --sx-surface-section: #ffffff !important;
  --sx-surface-card: #ffffff !important;
  --sx-surface-overlay: #ffffff !important;
  --sx-surface-border: #c8c8c8 !important;
  --sx-surface-hover: #eaeaea !important;

  /* Existing SalaryX table tokens */
  --sx-striping: #f4f4f4 !important;
  --sx-hover-row: #eaeaea !important;

  /* --- Links / focus / mask --- */
  --sx-link: #007ad9 !important;
  --sx-link-hover: #0068b8 !important;
  --sx-focus-ring: 0 0 0 .2rem #8dcdff !important;
  --sx-maskbg: rgba(0, 0, 0, .4) !important;

  /* --- Reference surface tokens (Prime-like naming, kept for completeness) --- */
  --surface-a: #ffffff !important;
  --surface-b: #f4f4f4 !important;
  --surface-c: #eaeaea !important;
  --surface-d: #c8c8c8 !important;
  --surface-e: #ffffff !important;
  --surface-f: #ffffff !important;
  --text-color: #333333 !important;
  --text-color-secondary: #848484 !important;
  --primary-color: #007ad9 !important;
  --primary-color-text: #ffffff !important;
  --highlight-bg: #007ad9 !important;
  --highlight-text-color: #ffffff !important;
  --surface-0: #ffffff !important;
  --surface-50: #eef1f2 !important;
  --surface-100: #dde2e4 !important;
  --surface-200: #bbc5ca !important;
  --surface-300: #98a8af !important;
  --surface-400: #768b95 !important;
  --surface-500: #546e7a !important;
  --surface-600: #435862 !important;
  --surface-700: #324249 !important;
  --surface-800: #222c31 !important;
  --surface-900: #111618 !important;
  --surface-ground: #f4f4f4 !important;
  --surface-section: #ffffff !important;
  --surface-card: #ffffff !important;
  --surface-overlay: #ffffff !important;
  --surface-border: #c8c8c8 !important;
  --surface-hover: #eaeaea !important;
  --maskbg: rgba(0, 0, 0, .4) !important;
  --focus-ring: 0 0 0 .2rem #8dcdff !important;

  /* --- Neutral scales --- */
  --gray-50: #eef1f2 !important;
  --gray-100: #dde2e4 !important;
  --gray-200: #bbc5ca !important;
  --gray-300: #98a8af !important;
  --gray-400: #768b95 !important;
  --gray-500: #546e7a !important;
  --gray-600: #435862 !important;
  --gray-700: #324249 !important;
  --gray-800: #222c31 !important;
  --gray-900: #111618 !important;

  --bluegray-50: #f7f8f9 !important;
  --bluegray-100: #dae0e3 !important;
  --bluegray-200: #bdc7cd !important;
  --bluegray-300: #a0aeb6 !important;
  --bluegray-400: #8295a0 !important;
  --bluegray-500: #657c8a !important;
  --bluegray-600: #566975 !important;
  --bluegray-700: #475761 !important;
  --bluegray-800: #38444c !important;
  --bluegray-900: #283237 !important;

  /* --- Color scales (muted, for subtle differentiation where needed) --- */
  --blue-50: #f3f8fc !important;
  --blue-100: #c6dcef !important;
  --blue-200: #98c1e3 !important;
  --blue-300: #6ba5d7 !important;
  --blue-400: #3d8aca !important;
  --blue-500: #106ebe !important;
  --blue-600: #0e5ea2 !important;
  --blue-700: #0b4d85 !important;
  --blue-800: #093d69 !important;
  --blue-900: #062c4c !important;

  --green-50: #f7fbf6 !important;
  --green-100: #d6ead1 !important;
  --green-200: #b6d9ad !important;
  --green-300: #96c889 !important;
  --green-400: #76b765 !important;
  --green-500: #56a641 !important;
  --green-600: #498d37 !important;
  --green-700: #3c742e !important;
  --green-800: #2f5b24 !important;
  --green-900: #22421a !important;

  --yellow-50: #fffcf5 !important;
  --yellow-100: #fdefcd !important;
  --yellow-200: #fbe3a6 !important;
  --yellow-300: #f9d67f !important;
  --yellow-400: #f8ca57 !important;
  --yellow-500: #f6bd30 !important;
  --yellow-600: #d1a129 !important;
  --yellow-700: #ac8422 !important;
  --yellow-800: #87681a !important;
  --yellow-900: #624c13 !important;

  --cyan-50: #f4fbfd !important;
  --cyan-100: #ccebf5 !important;
  --cyan-200: #a4dbed !important;
  --cyan-300: #7ccce5 !important;
  --cyan-400: #54bcdd !important;
  --cyan-500: #2cacd5 !important;
  --cyan-600: #2592b5 !important;
  --cyan-700: #1f7895 !important;
  --cyan-800: #185f75 !important;
  --cyan-900: #124555 !important;

  --pink-50: #fdf4f9 !important;
  --pink-100: #f6cce0 !important;
  --pink-200: #eea3c7 !important;
  --pink-300: #e77aae !important;
  --pink-400: #df5296 !important;
  --pink-500: #d8297d !important;
  --pink-600: #b8236a !important;
  --pink-700: #971d58 !important;
  --pink-800: #771745 !important;
  --pink-900: #561032 !important;

  --indigo-50: #f4f6fd !important;
  --indigo-100: #ccd3f5 !important;
  --indigo-200: #a4b0ed !important;
  --indigo-300: #7c8de5 !important;
  --indigo-400: #546add !important;
  --indigo-500: #2c47d5 !important;
  --indigo-600: #253cb5 !important;
  --indigo-700: #1f3295 !important;
  --indigo-800: #182775 !important;
  --indigo-900: #121c55 !important;

  --teal-50: #f6fbfa !important;
  --teal-100: #d1eae5 !important;
  --teal-200: #add9d1 !important;
  --teal-300: #89c8bd !important;
  --teal-400: #65b7a8 !important;
  --teal-500: #41a694 !important;
  --teal-600: #378d7e !important;
  --teal-700: #2e7468 !important;
  --teal-800: #245b51 !important;
  --teal-900: #1a423b !important;

  --orange-50: #fff9f5 !important;
  --orange-100: #fde4cd !important;
  --orange-200: #fbcfa6 !important;
  --orange-300: #f9ba7f !important;
  --orange-400: #f8a457 !important;
  --orange-500: #f68f30 !important;
  --orange-600: #d17a29 !important;
  --orange-700: #ac6422 !important;
  --orange-800: #874f1a !important;
  --orange-900: #623913 !important;

  --purple-50: #f9f8fd !important;
  --purple-100: #e1dff7 !important;
  --purple-200: #cac5f1 !important;
  --purple-300: #b2abeb !important;
  --purple-400: #9b92e4 !important;
  --purple-500: #8378de !important;
  --purple-600: #6f66bd !important;
  --purple-700: #5c549b !important;
  --purple-800: #48427a !important;
  --purple-900: #343059 !important;

  --red-50: #fdf4f3 !important;
  --red-100: #f6ccc6 !important;
  --red-200: #eea39a !important;
  --red-300: #e77b6d !important;
  --red-400: #df5240 !important;
  --red-500: #d82a13 !important;
  --red-600: #b82410 !important;
  --red-700: #971d0d !important;
  --red-800: #77170a !important;
  --red-900: #561108 !important;

  /* Brand primary scale */
  --primary-50: #f2f8fd !important;
  --primary-100: #c2dff6 !important;
  --primary-200: #91c6ef !important;
  --primary-300: #61ade7 !important;
  --primary-400: #3093e0 !important;
  --primary-500: #007ad9 !important;
  --primary-600: #0068b8 !important;
  --primary-700: #005598 !important;
  --primary-800: #004377 !important;
  --primary-900: #003157 !important;
}