/**
 * Dark theme for the storefront.
 *
 * WHY THIS IS A SEPARATE, HAND-WRITTEN SHEET
 *
 * `assets/app.css` is a compiled Tailwind artifact, and the `ink` scale it was
 * built against is baked in as literal hex — `text-ink-900` is `color:#343a47`
 * in the output, not a variable. There is no way to re-tint it at runtime, and
 * no build step in this checkout to recompile it against a `dark:` variant. So
 * dark mode is done the one way that works without touching the artifact:
 * re-declare the handful of colour utilities the storefront actually uses,
 * scoped to `html.dark`, in a sheet loaded after it.
 *
 * Every selector below is deliberately single-class (0,1,0 specificity) and
 * relies on load order to win, exactly like the utilities it overrides. Where
 * something must beat another override — `.img-tile` over `.bg-white` — it is
 * ordered later in this file rather than given a heavier selector.
 *
 * KEEPING IT IN STEP
 *
 * If you add a colour utility to a storefront view that is not listed here, it
 * will keep its light value in dark mode. The set below was taken from what the
 * shop views actually use; re-check with:
 *
 *   grep -rohE '\b(bg|text|border)-(white|ink-[0-9]{2,3})\b' resources/views/livewire/shop
 *
 * The brand and accent ramps are NOT re-declared: those are already CSS custom
 * properties that ThemeService prints per request, so they follow the shop's
 * chosen colour in both themes. Only their palest tints are remapped, because a
 * near-white chip is unreadable on a dark card.
 */

html.dark {
  color-scheme: dark;
}

/* ------------------------------------------------------------------ *
 * Surfaces
 * ------------------------------------------------------------------ */

html.dark body            { background-color: #0d1117; color: #e6edf3; }

html.dark .bg-white       { background-color: #161b22; }
html.dark .bg-ink-50      { background-color: #0d1117; }
html.dark .bg-ink-100     { background-color: #21262d; }
html.dark .bg-ink-200     { background-color: #2d333b; }
html.dark .bg-ink-950     { background-color: #010409; }

/* Alpha variants used for headers and scrims. The compiled utility bakes the
   colour into an rgb(), so each one has to be restated rather than inherited. */
html.dark .bg-white\/95   { background-color: rgba(22, 27, 34, .95); }
html.dark .bg-ink-50\/70  { background-color: rgba(13, 17, 23, .7); }
html.dark .bg-ink-100\/80 { background-color: rgba(33, 38, 45, .8); }
html.dark .bg-ink-950\/50 { background-color: rgba(1, 4, 9, .66); }
html.dark .bg-ink-50\/60  { background-color: rgba(13, 17, 23, .6); }   /* desktop search field */
html.dark .bg-ink-50\/95  { background-color: rgba(13, 17, 23, .95); }  /* sticky filter bar */

/* The home carousel's prev/next buttons: a near-white pill carrying
   `text-ink-800`. Leaving the pill white while that text turns light left a
   pale glyph on a pale button — invisible. The pill flips with the text.
   `bg-white/85` and `bg-white/60` are NOT remapped: those are the slide dots,
   which sit on the artwork itself and are meant to read as white there. */
html.dark .bg-white\/90 { background-color: rgba(22, 27, 34, .9); }

/* Scrims over banner artwork are already dark; they stay exactly as they are,
   as does every `text-white/NN` — both sit on images or filled brand buttons
   where white is still the correct foreground in either theme. */

/* ------------------------------------------------------------------ *
 * Text
 *
 * Not a straight inversion of the light ramp. Pure white on a dark ground
 * haloes badly at small sizes, so the top of the scale stops at #e6edf3, and
 * the muted end is lifted well above its mirrored value — #8b949e reads as
 * "secondary" on #161b22 the way #657793 does on white, whereas the true
 * inverse would be all but invisible.
 * ------------------------------------------------------------------ */

html.dark .text-ink-900 { color: #e6edf3; }
html.dark .text-ink-800 { color: #dbe2ea; }
html.dark .text-ink-700 { color: #c9d1d9; }
html.dark .text-ink-600 { color: #b1bac4; }
html.dark .text-ink-500 { color: #8b949e; }
html.dark .text-ink-400 { color: #7d8590; }
html.dark .text-ink-300 { color: #6e7681; }

/* `text-white` is left alone on purpose: it is only ever used on a filled
   brand/accent button, where white is still the correct foreground. */

/* ------------------------------------------------------------------ *
 * Borders and rules
 * ------------------------------------------------------------------ */

html.dark .border-ink-100  { border-color: #21262d; }
html.dark .border-ink-200  { border-color: #30363d; }
html.dark .border-ink-300  { border-color: #3d444d; }
html.dark .border-white    { border-color: #161b22; }
html.dark .divide-ink-100 > :not([hidden]) ~ :not([hidden]) { border-color: #21262d; }

/* ------------------------------------------------------------------ *
 * Brand tints
 *
 * `bg-brand-50` is a near-white wash — correct on paper, a glaring slab on a
 * dark card. Remapped to a translucent brand instead of a fixed colour so it
 * still follows whatever palette the admin has chosen, and the text on it moves
 * up the ramp to a stop that has enough contrast against it.
 * ------------------------------------------------------------------ */

html.dark .bg-brand-50   { background-color: rgb(var(--brand-500) / .14); }
html.dark .bg-brand-100  { background-color: rgb(var(--brand-500) / .2); }
html.dark .bg-brand-50\/40 { background-color: rgb(var(--brand-500) / .1); }
html.dark .border-brand-100 { border-color: rgb(var(--brand-500) / .3); }
html.dark .text-brand-700 { color: rgb(var(--brand-300)); }
html.dark .text-brand-600 { color: rgb(var(--brand-300)); }
html.dark .hover\:text-brand-700:hover { color: rgb(var(--brand-200)); }

/* ------------------------------------------------------------------ *
 * Status chips
 *
 * Same idea: the light-tint chips become translucent washes of their own hue
 * with the text moved to the light end of the ramp, so "in stock" still reads
 * green and an error still reads red without a white block behind it.
 * ------------------------------------------------------------------ */

html.dark .bg-emerald-50 { background-color: rgba(46, 160, 67, .16); }
html.dark .border-emerald-200 { border-color: rgba(46, 160, 67, .38); }
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700 { color: #7ee2a8; }

html.dark .bg-red-50  { background-color: rgba(248, 81, 73, .15); }
html.dark .bg-red-100 { background-color: rgba(248, 81, 73, .22); }
html.dark .border-red-200 { border-color: rgba(248, 81, 73, .38); }
html.dark .text-red-800,
html.dark .text-red-700,
html.dark .text-red-600 { color: #ff8b83; }
html.dark .hover\:bg-red-50:hover { background-color: rgba(248, 81, 73, .15); }

html.dark .bg-amber-50 { background-color: rgba(210, 153, 34, .16); }
html.dark .border-amber-200 { border-color: rgba(210, 153, 34, .38); }
html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700,
html.dark .text-amber-600 { color: #e3b341; }

html.dark .bg-blue-50 { background-color: rgba(47, 129, 247, .16); }
html.dark .text-blue-700 { color: #79c0ff; }

/* ------------------------------------------------------------------ *
 * Hover states compiled against the light palette
 * ------------------------------------------------------------------ */

html.dark .hover\:bg-ink-50:hover  { background-color: #21262d; }
html.dark .hover\:bg-ink-100:hover { background-color: #2d333b; }
html.dark .hover\:bg-white:hover   { background-color: #1c2129; }
html.dark .hover\:text-ink-800:hover { color: #dbe2ea; }
html.dark .hover\:text-ink-700:hover { color: #c9d1d9; }

/* ------------------------------------------------------------------ *
 * Component classes from resources/css/app.css
 *
 * These are `@apply` compositions, so overriding the utilities above does not
 * reach them — the declarations were flattened at build time.
 * ------------------------------------------------------------------ */

html.dark .card    { background-color: #161b22; }
/* Hand-styled in the component's own <style>, so the `.bg-white` override above
   never reaches it. */
html.dark .enquiry-panel { background-color: #161b22; box-shadow: 0 10px 30px -8px rgba(1, 4, 9, .6); }
html.dark .chip    { background-color: #161b22; border-color: #30363d; }
html.dark .btn-outline { background-color: #161b22; border-color: #30363d; color: #dbe2ea; }
html.dark .btn-outline:hover { background-color: #21262d; }
html.dark .btn-ghost { color: #c9d1d9; }
html.dark .btn-ghost:hover { background-color: #21262d; }
html.dark .label   { color: #c9d1d9; }
html.dark .help    { color: #8b949e; }
html.dark .err     { color: #ff8b83; }

html.dark .input,
html.dark .textarea {
  background-color: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}
html.dark .input::placeholder,
html.dark .textarea::placeholder { color: #6e7681; }

html.dark .skeleton { background-color: #21262d; }
/* The shimmer sweep is a white gradient; at full strength it flares on a dark
   card. Same motion, a fraction of the amplitude. */
html.dark .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  background-size: 500px 100%;
}

/* Shadows are tuned for ink on white and simply vanish here; a border is what
   actually separates a raised surface from the page in a dark UI. */
html.dark .shadow-card,
html.dark .shadow-pop,
html.dark .shadow-sheet { box-shadow: 0 8px 24px rgba(1, 4, 9, .5); }

/* ------------------------------------------------------------------ *
 * The bits that must stay light
 * ------------------------------------------------------------------ */

/* Product photography is shot on white and cut out against it. Inverting the
   tile leaves every product sitting in its own white rectangle, which looks
   like a rendering fault rather than a theme. The tile stays white; only its
   surround changes. Ordered after `.bg-white` above so it wins on source order
   at equal specificity. */
html.dark .img-tile { background-color: #fff; }

/* Payment marks and the THEQA seal are third-party artwork on white — one of
   them a JPEG, so it carries its own white ground and cannot be made
   transparent. Given a light plate rather than inverted: these are trademarks,
   and recolouring them is not ours to do. */
html.dark .trust-mark {
  background-color: #fff;
  border-radius: .5rem;
  padding: .375rem .625rem;
}

/* The splash covers the first paint. Left white it flashes a full-screen white
   card at a shopper who chose dark, on every cold start. */
html.dark #app-splash { background-color: #0d1117; }

/* ------------------------------------------------------------------ *
 * Chrome
 * ------------------------------------------------------------------ */

html.dark ::-webkit-scrollbar-thumb { background: #30363d; background-clip: content-box; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3d444d; background-clip: content-box; }
html.dark { scrollbar-color: #30363d transparent; }

/* The category bar's edge fades are gradients to white; against a dark bar they
   read as a light smear rather than a fade. */
html.dark .from-white { --tw-gradient-from: #161b22 var(--tw-gradient-from-position); }
html.dark .via-white  { --tw-gradient-via-position: ; }
html.dark .to-transparent { --tw-gradient-to: rgba(22, 27, 34, 0) var(--tw-gradient-to-position); }
html.dark .from-white,
html.dark .via-white {
  --tw-gradient-stops: #161b22 var(--tw-gradient-from-position),
                       #161b22 var(--tw-gradient-via-position, 50%),
                       rgba(22, 27, 34, 0) var(--tw-gradient-to-position);
}

/* The desktop search field styles itself in the header partial's own <style>
   block, against the light palette. */
html.dark #global-search { color: #e6edf3; }
html.dark #global-search::placeholder { color: #8b949e; }
html.dark .global-search:focus-within { background-color: #0d1117; }

/* The footer's own <style> block hard-codes these, so overriding the ink
   utilities never reaches them. */
html.dark .footer-heading { color: #e6edf3; }
html.dark .footer-links   { color: #8b949e; }

/* Mobile footer accordions, same story. */
html.dark .facc           { border-bottom-color: #21262d; }
html.dark .facc > summary { color: #e6edf3; }
html.dark .facc-chev      { color: #7d8590; }
html.dark .facc-body a    { color: #8b949e; }