/* ==========================================================================
 * LOOPED theme layer — loaded AFTER vendor/app.css and the inline <style>.
 *
 * Light theme (default) is pixel-identical: every dark rule below is scoped
 * to `html.dark`. The dark palette: page #121416, cards #1B1E21, raised
 * surfaces #24292E / #2C3138, borders #2E343B / #3B424B, text #F4F4F4 down to
 * #8E8E8E. Stark black controls invert to white; success emerald is
 * brightened for contrast; listing artwork gradients are untouched.
 * ========================================================================== */

html.dark { color-scheme: dark; }
html.dark body { background-color: #121416; }

/* ------------------------------- surfaces ------------------------------ */
html.dark .bg-white { background-color: #1B1E21; }
html.dark .bg-white\/95 { background-color: rgba(27, 30, 33, .95); }
html.dark .bg-neutral-50 { background-color: #1E2226; }
html.dark .bg-neutral-100 { background-color: #24292E; }
html.dark .bg-neutral-200 { background-color: #2C3138; }
html.dark .bg-neutral-300 { background-color: #363C44; }
html.dark .bg-neutral-800 { background-color: #E8E8E8; }
html.dark .bg-neutral-900 { background-color: #000000; }

/* Stark controls invert: solid black buttons / chips / banners become white. */
html.dark .bg-black { background-color: #FFFFFF; }
html.dark .bg-black.text-white { color: #111214; }
html.dark .bg-black .text-white { color: #111214; }
/* Muted copy inside an inverted-black container (e.g. promo banner subtitle). */
html.dark .bg-black .text-neutral-300 { color: #5F656D; }
html.dark .bg-black .text-neutral-400 { color: #6E747C; }
html.dark .hover\:bg-black:hover { background-color: #E8E8E8; }
html.dark .hover\:bg-neutral-800:hover { background-color: #3A4046; }
html.dark .active\:bg-neutral-50:active { background-color: #24292E; }
html.dark .active\:bg-neutral-200:active { background-color: #2C3138; }
/* NOTE: bg-black/30..70 (image scrims, backdrops) are intentionally untouched. */

/* --------------------------------- text -------------------------------- */
html.dark .text-black { color: #FFFFFF; }
html.dark .text-neutral-900 { color: #F4F4F4; }
html.dark .text-neutral-800 { color: #E5E5E5; }
html.dark .text-neutral-700 { color: #CFCFCF; }
html.dark .text-neutral-600 { color: #B4B4B4; }
html.dark .text-neutral-500 { color: #9C9C9C; }
html.dark .text-neutral-400 { color: #8E8E8E; }
html.dark .text-neutral-300 { color: #6E747C; }
html.dark .text-neutral-200 { color: #4A5058; }
html.dark .text-emerald-600 { color: #34D399; }
html.dark .text-emerald-500 { color: #34D399; }
html.dark .text-emerald-700 { color: #6EE7B7; }
html.dark .hover\:text-white:hover { color: #111214; }

/* -------------------------------- borders ------------------------------- */
html.dark .border-neutral-100 { border-color: #262A2F; }
html.dark .border-neutral-200 { border-color: #2E343B; }
html.dark .border-neutral-300 { border-color: #3B424B; }
html.dark .border-neutral-700 { border-color: #4B525B; }
html.dark .border-black { border-color: #EDEDED; }
html.dark .border-emerald-600 { border-color: #34D399; }
html.dark .hover\:border-black:hover { border-color: #FFFFFF; }

/* ---------------------------- rings and focus --------------------------- */
html.dark .focus\:ring-black:focus { --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); }
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14) !important;
}

/* ------------------------------ components ------------------------------ */
html.dark .barcode {
  background: repeating-linear-gradient(to right, #fff 0 2px, transparent 2px 5px, #fff 5px 6px, transparent 6px 10px, #fff 10px 13px, transparent 13px 16px);
}
html.dark .shadow-xl { --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .5); }
html.dark .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); }

/* ==========================================================================
 * Both-themes polish (unscoped on purpose).
 * ========================================================================== */

/* Form-error utility used in app.js but missing from the compiled CSS. */
.text-red-500 { color: #EF4444; }
html.dark .text-red-500 { color: #F87171; }

/* Favourite-heart hit area → 48px without changing its look. */
button[aria-label="Save to favourites"]::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* Keyboard focus visibility (inputs keep their own focus ring). */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
html.dark button:focus-visible,
html.dark a:focus-visible,
html.dark [role="button"]:focus-visible {
  outline-color: #fff;
}