/* ==========================================================================
   lese-reskin.css — remaps the legacy dark Tailwind utility palette to the
   lese light theme for AirCheck doc/utility pages (manual, quickstart,
   changelog, downloads). Load AFTER /dist/output.css AND /src/css/lese-theme.css.
   Layout utilities (spacing/grid/flex) are untouched; only colour, font and
   surface utilities are re-mapped. Content markup stays byte-identical.
   ========================================================================== */

/* ---------- base ---------- */
body {
  background: var(--page) !important;
  color: var(--ink) !important;
  font-family: var(--body-read) !important;
}
h1, h2, h3, h4 { font-family: var(--display) !important; }

/* ---------- text colours (dark → light ink scale) ---------- */
.text-white               { color: var(--ink) !important; }
.text-gray-200,
.text-gray-300            { color: #3f4a55 !important; }
.text-gray-400            { color: #58616c !important; }
.text-gray-500            { color: #6b7684 !important; }
.text-gray-600            { color: #8a93a3 !important; }
.text-green-400           { color: #1a9a55 !important; }
.text-red-400             { color: #c2402a !important; }
.text-red-300\/90         { color: #b0402e !important; }
.text-amber-400,
.text-yellow-400          { color: #b45309 !important; }
.text-blue-400            { color: #2b6fd4 !important; }
.text-zinc-400            { color: #58616c !important; }
.text-zinc-600            { color: #8a93a3 !important; }
.text-slate-400           { color: #58616c !important; }
.text-white\/60           { color: #6b7684 !important; }
.text-white\/70           { color: #58616c !important; }
.text-white\/90           { color: var(--ink) !important; }

/* keep white text inside solid colour fills (buttons, pills, alerts) */
.bg-accent-blue.text-white, .bg-accent-blue .text-white,
.bg-blue-500.text-white,   .bg-blue-500 .text-white,
.bg-green-500.text-white,  .bg-green-500 .text-white,
.bg-emerald-500.text-white,.bg-emerald-500 .text-white,
.bg-red-500.text-white,    .bg-red-500 .text-white,
.bg-gray-600.text-white,   .bg-gray-600 .text-white {
  color: #fff !important;
}

/* ---------- borders ---------- */
.border-white\/5,
.border-white\/10,
.border-white\/20,
.border-white\/30,
.border-white\/40         { border-color: var(--line) !important; }
.divide-white\/5 > :not([hidden]) ~ :not([hidden]),
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }

/* ---------- surfaces ---------- */
.bg-black                 { background-color: var(--page) !important; }
.bg-black\/50             { background-color: rgba(246,247,251,.6) !important; }
.bg-black\/90,
.bg-black\/95             { background-color: rgba(255,255,255,.94) !important; }
.bg-apple-dark            { background-color: var(--page) !important; }
.bg-white\/5              { background-color: var(--page-2) !important; }
.bg-white\/10,
.bg-white\/20             { background-color: #eef0f8 !important; }
.bg-zinc-900\/60,
.bg-zinc-900,
.bg-zinc-800              { background-color: var(--page-2) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(126,134,173,.14) !important; }
.hover\:text-white:hover  { color: var(--ink) !important; }

/* neutralise dark decorative gradients (ambient glows keep working via
   accent-blue tints, which read fine on light) */
.bg-gradient-to-b, .bg-gradient-to-br {
  background-image: none !important;
}

/* cards that relied on dark glass: give them a light card face */
.backdrop-blur-2xl, .backdrop-blur-xl { backdrop-filter: none !important; }

/* ---------- main navigation → periwinkle band ---------- */
nav[aria-label="Main navigation"] {
  background: var(--peri) !important;
  border-bottom: none !important;
}
nav[aria-label="Main navigation"] .text-white,
nav[aria-label="Main navigation"] a { color: rgba(255,255,255,.88) !important; }
nav[aria-label="Main navigation"] .text-gray-400 { color: rgba(255,255,255,.78) !important; }
nav[aria-label="Main navigation"] .hover\:text-white:hover { color: #fff !important; }
nav[aria-label="Main navigation"] .bg-white { background: #fff !important; }
nav[aria-label="Main navigation"] .bg-white.text-black,
nav[aria-label="Main navigation"] .bg-white.text-black:hover { color: var(--ink) !important; }
/* dropdown + mobile menu become white cards with ink text */
nav[aria-label="Main navigation"] .bg-black\/90,
#mobile-menu {
  background: rgba(255,255,255,.97) !important;
  border-color: var(--line) !important;
  box-shadow: 0 18px 40px -22px rgba(24,33,37,.35) !important;
}
nav[aria-label="Main navigation"] .bg-black\/90 a,
#mobile-menu a { color: var(--ink-2) !important; }
nav[aria-label="Main navigation"] .bg-black\/90 a:hover,
#mobile-menu a:hover { color: var(--ink) !important; }
#mobile-menu .text-white { color: var(--ink) !important; }

/* ---------- pills / status chips ---------- */
.bg-accent-blue\/10       { background-color: rgba(41,151,255,.08) !important; }
.bg-accent-blue\/15       { background-color: rgba(41,151,255,.10) !important; }
.bg-accent-blue\/20       { background-color: rgba(41,151,255,.14) !important; }
.bg-accent-blue\/30       { background-color: rgba(41,151,255,.18) !important; }
.bg-yellow-500\/10        { background-color: rgba(234,179,8,.12) !important; }
.bg-red-500\/10           { background-color: rgba(239,68,68,.10) !important; }
.bg-red-500\/20           { background-color: rgba(239,68,68,.14) !important; }
.bg-green-500\/20         { background-color: rgba(34,197,94,.14) !important; }
.bg-blue-500\/20          { background-color: rgba(59,130,246,.14) !important; }

/* ---------- shadows: soften for light bg ---------- */
.shadow-2xl { box-shadow: 0 30px 60px -34px rgba(24,33,37,.4) !important; }
.shadow-xl  { box-shadow: 0 22px 46px -30px rgba(24,33,37,.35) !important; }

/* ---------- selection ---------- */
::selection { background: #ee2c82 !important; color: #fff !important; }

/* ==========================================================================
   v2 additions — manual/doc readability audit (2026-07-06)
   ========================================================================== */

/* light-tint text colours designed for dark bg → darkened for light bg */
.text-blue-300            { color: #2b6fd4 !important; }
.text-cyan-400            { color: #0e7f8c !important; }
.text-purple-300,
.text-purple-400          { color: #6d47c4 !important; }
.text-yellow-300          { color: #a16207 !important; }

/* custom.css white-gradient clipped text (invisible on light) → solid ink */
.text-gradient {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* legacy inline styles carrying dark-theme colours */
[style*="color:#ccc"],
[style*="color: #ccc"]    { color: var(--ink-2) !important; }
[style*="rgba(190,211,202"] { background-color: transparent !important; border-color: var(--line) !important; }

/* ---------- doc polish: closer to the product-page feel ---------- */
/* display headings with the product page's tight tracking */
h1, h2 { letter-spacing: -0.01em !important; }
/* card-ish blocks get the product page's hairline + soft depth */
.rounded-2xl.border { border-color: var(--line) !important; }
/* code / path blocks: keep mono but give them the light card face */
pre, code, .font-mono { color: #33414d; }
pre { background: var(--page-2) !important; border: 1px solid var(--line); border-radius: 12px; }
/* tables inside docs */
table { border-color: var(--line) !important; }
thead tr { background: #fff !important; }
/* links inside body copy: brand blue with hover ink (product-page behaviour) */
main a[href]:not([class*="bg-"]):not([class*="text-"]) { color: var(--blue); }
main a[href]:not([class*="bg-"]):not([class*="text-"]):hover { color: var(--ink); }
/* …but inside the periwinkle nav those legacy inline colours must stay light */
nav[aria-label="Main navigation"] [style*="color:#ccc"],
nav[aria-label="Main navigation"] [style*="color: #ccc"] { color: rgba(255,255,255,.85) !important; }

/* ==========================================================================
   v3 — align doc/download CTAs with the product page button system
   (primary action = dark ink pill w/ display font, blue stays an accent)
   ========================================================================== */
a.bg-accent-blue {
  background-color: var(--dark) !important;
  color: #fff !important;
  font-family: var(--display) !important;
  box-shadow: 0 14px 30px -14px rgba(24,33,37,.8) !important;
  transition: transform .16s ease !important;
}
a.bg-accent-blue:hover,
a.hover\:bg-accent-blue\/80:hover { background-color: var(--dark) !important; transform: translateY(-2px); }
a.bg-accent-blue .text-white, a.bg-accent-blue.text-white { color: #fff !important; }

/* uppercase eyebrow chips (e.g. "NEW RELEASE") → lavender label pill like the product page */
span.uppercase.tracking-widest {
  color: var(--peri-lo) !important;
  background: rgba(126,134,173,.14) !important;
  border-color: transparent !important;
  font-family: var(--display) !important;
  backdrop-filter: none !important;
}

/* download cards: equal-height flex columns so the two CTAs align,
   regardless of description line count */
div.rounded-2xl.p-8.text-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
div.rounded-2xl.p-8.text-center > a.bg-accent-blue { margin-top: auto !important; width: 100%; }
div.rounded-2xl.p-8.text-center > a.bg-accent-blue + p { margin-top: 14px !important; }
/* naked icons: drop the gray chip behind the platform glyphs */
.w-16.h-16.bg-white\/10 { background: transparent !important; }

/* ==========================================================================
   v4 — Kiyome product page: neutralise bespoke dark panels (inline hex + zinc)
   Inline background-color hex has highest specificity → override via
   attribute selector + !important. Only fires on pages that use these values.
   ========================================================================== */
[style*="#1a1e2a"] { background-color: #f3f4f8 !important; }          /* "problem" card — cool light */
[style*="#1f1a14"] { background: linear-gradient(150deg, rgba(194,103,71,.10), #fdf6f0) !important; } /* Kiyome card — warm light */
[style*="#262630"], [style*="#1e1e28"], [style*="#151515"] { background-color: var(--page-2) !important; }
.bg-zinc-800, .bg-zinc-800\/50, .bg-zinc-800\/40,
.bg-zinc-900\/40, .bg-zinc-900\/60, .bg-zinc-900\/80, .bg-zinc-900\/95 { background-color: var(--page-2) !important; }
.backdrop-blur-2xl, .backdrop-blur-xl { backdrop-filter: none !important; }
/* orange stays Kiyome's brand accent, but darken the palest tints for contrast on light */
.text-orange-300 { color: #c2571a !important; }
.text-orange-400 { color: #d2691e !important; }
/* zinc text on now-light panels */
.text-zinc-300, .text-zinc-200 { color: #3f4a55 !important; }
.text-zinc-500, .text-zinc-600 { color: #6b7684 !important; }

/* v4 continued — remaining Kiyome dark values */
[style*="#4a3325"] { background: #fdf1e8 !important; }
[style*="#4a90d9"], [style*="#5ba3ec"] { }  /* light blues — leave */
.bg-zinc-700, .bg-zinc-700\/50 { background-color: #eef0f6 !important; }
.bg-black\/20, .bg-black\/30, .bg-black\/50, .bg-black\/60 { background-color: rgba(126,134,173,.08) !important; }
/* gradient inline styles containing dark brown stops → warm light */
[style*="linear-gradient"][style*="#1f1a14"], [style*="linear-gradient"][style*="#4a3325"] {
  background: linear-gradient(150deg, rgba(194,103,71,.10), #fdf6f0) !important;
}