/* Grayscale theme */
:root {
  /* Base grayscale palette */
  --gray-50: oklch(98% 0 0);
  --gray-100: oklch(95% 0 0);
  --gray-200: oklch(90% 0 0);
  --gray-300: oklch(82% 0 0);
  --gray-400: oklch(72% 0 0);
  --gray-500: oklch(60% 0 0);
  --gray-600: oklch(48% 0 0);
  --gray-700: oklch(36% 0 0);
  --gray-800: oklch(26% 0 0);
  --gray-900: oklch(18% 0 0);
  --gray-950: oklch(12% 0 0);

  /* Map existing color tokens to grayscale values */
  --color-red-300: var(--gray-300);
  --color-red-500: var(--gray-600);
  --color-red-600: var(--gray-700);
  --color-red-700: var(--gray-800);
  --color-red-800: var(--gray-900);
  --color-red-900: var(--gray-950);

  --color-orange-50: var(--gray-50);
  --color-orange-100: var(--gray-100);
  --color-orange-200: var(--gray-200);
  --color-orange-300: var(--gray-300);
  --color-orange-400: var(--gray-400);
  --color-orange-500: var(--gray-600);
  --color-orange-600: var(--gray-700);
  --color-orange-700: var(--gray-800);
  --color-orange-800: var(--gray-900);
  --color-orange-900: var(--gray-950);
  --color-orange-950: var(--gray-950);

  --color-amber-50: var(--gray-50);
  --color-amber-200: var(--gray-200);
  --color-amber-300: var(--gray-300);
  --color-amber-900: var(--gray-900);

  --color-green-50: var(--gray-50);
  --color-green-100: var(--gray-100);
  --color-green-200: var(--gray-200);
  --color-green-300: var(--gray-300);
  --color-green-400: var(--gray-400);
  --color-green-500: var(--gray-600);
  --color-green-600: var(--gray-700);
  --color-green-700: var(--gray-800);
  --color-green-800: var(--gray-900);
  --color-green-900: var(--gray-950);
  --color-green-950: var(--gray-950);

  --color-blue-50: var(--gray-50);
  --color-blue-100: var(--gray-100);
  --color-blue-200: var(--gray-200);
  --color-blue-300: var(--gray-300);
  --color-blue-400: var(--gray-400);
  --color-blue-500: var(--gray-600);
  --color-blue-600: var(--gray-700);
  --color-blue-700: var(--gray-800);
  --color-blue-800: var(--gray-900);
  --color-blue-900: var(--gray-950);
  --color-blue-950: var(--gray-950);

  --color-indigo-50: var(--gray-50);
}

/* Accent colors lean on neutrals */
:root {
  --accent-primary: #000000;
  --accent-secondary: var(--gray-600);
  --accent-hover: var(--gray-950);
  --accent-focus: var(--gray-200);
}

/* Global grayscale treatment */
body {
  background-color: var(--gray-50);
  color: var(--gray-900);
}

/* Enforce black chrome for header and footer */
header,
footer {
  background-color: #000000;
  color: var(--gray-100);
}

/* Remap legacy orange/red utility classes to the grayscale accent */
.bg-orange-500 { background-color: var(--accent-primary) !important; }
.bg-orange-600, .hover\:bg-orange-600:hover { background-color: var(--accent-hover) !important; }
.bg-orange-200 { background-color: var(--color-blue-200) !important; }
.bg-orange-100 { background-color: var(--color-blue-100) !important; }
.border-orange-500 { border-color: var(--accent-primary) !important; }
.border-orange-200 { border-color: var(--color-blue-200) !important; }
.text-orange-500 { color: var(--accent-primary) !important; }
.text-orange-400 { color: var(--accent-secondary) !important; }
.text-orange-200 { color: var(--color-blue-100) !important; }
.hover\:text-orange-500:hover { color: var(--accent-primary) !important; }
.hover\:text-orange-200:hover { color: var(--color-blue-100) !important; }
.from-orange-500 {
  --tw-gradient-from: var(--accent-primary) !important;
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}
.via-orange-600 {
  --tw-gradient-via: var(--accent-hover) !important;
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.to-red-600 {
  --tw-gradient-to: var(--color-blue-800) !important;
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}

/* Grayscale overrides for common utility classes */
.bg-blue-50 { background-color: var(--color-blue-50) !important; }
.bg-blue-100 { background-color: var(--color-blue-100) !important; }
.bg-blue-200 { background-color: var(--color-blue-200) !important; }
.bg-blue-300 { background-color: var(--color-blue-300) !important; }
.bg-blue-400 { background-color: var(--color-blue-400) !important; }
.bg-blue-500 { background-color: var(--color-blue-500) !important; }
.bg-blue-600 { background-color: var(--color-blue-600) !important; }
.bg-blue-700 { background-color: #000000 !important; } /* black header/footer */
.bg-blue-800 { background-color: var(--gray-950) !important; }
.bg-blue-900 { background-color: var(--gray-950) !important; }
.bg-blue-950 { background-color: var(--gray-950) !important; }
.hover\:bg-blue-800:hover { background-color: #0f0f0f !important; }

.text-blue-100 { color: var(--color-blue-100) !important; }
.text-blue-200 { color: var(--color-blue-200) !important; }
.text-blue-300 { color: var(--color-blue-300) !important; }
.text-blue-400 { color: var(--color-blue-400) !important; }
.text-blue-500 { color: var(--color-blue-500) !important; }
.text-blue-600 { color: var(--color-blue-600) !important; }
.text-blue-700 { color: var(--color-blue-700) !important; }
.text-blue-800 { color: var(--color-blue-800) !important; }
.text-blue-900 { color: var(--color-blue-900) !important; }
.hover\:text-blue-700:hover { color: var(--color-blue-700) !important; }
.hover\:text-blue-800:hover { color: var(--color-blue-800) !important; }

.border-blue-100 { border-color: var(--color-blue-100) !important; }
.border-blue-200 { border-color: var(--color-blue-200) !important; }
.border-blue-300 { border-color: var(--color-blue-300) !important; }
.border-blue-500 { border-color: var(--color-blue-500) !important; }
.border-blue-600 { border-color: var(--color-blue-600) !important; }
.border-blue-800 { border-color: var(--color-blue-800) !important; }

.bg-green-50 { background-color: var(--color-green-50) !important; }
.bg-green-100 { background-color: var(--color-green-100) !important; }
.bg-green-200 { background-color: var(--color-green-200) !important; }
.bg-green-500 { background-color: var(--color-green-500) !important; }
.bg-green-600 { background-color: var(--color-green-600) !important; }
.text-green-700 { color: var(--color-green-700) !important; }
.text-green-800 { color: var(--color-green-800) !important; }
.border-green-500 { border-color: var(--color-green-500) !important; }
.border-green-600 { border-color: var(--color-green-600) !important; }

.bg-red-500 { background-color: var(--color-red-500) !important; }
.bg-red-600 { background-color: var(--color-red-600) !important; }
.hover\:bg-red-700:hover { background-color: var(--color-red-700) !important; }
.text-red-500 { color: var(--color-red-500) !important; }
.text-red-600 { color: var(--color-red-600) !important; }
.text-red-700 { color: var(--color-red-700) !important; }

/* Ensure search inputs stay readable */
.search-dropdown input[type="text"],
.mobile-search-dropdown input[type="text"],
#product-search-input,
#search-bar__input {
  color: #000000 !important;
}
.search-dropdown input[type="text"]::placeholder,
.mobile-search-dropdown input[type="text"]::placeholder,
#product-search-input::placeholder,
#search-bar__input::placeholder {
  color: var(--gray-500) !important;
}