/* Aurora chrome for the light tool pages (docs/AURORA_MIGRATION.md, Phase 3,
   decided 2026-10-22): the nav, a navy hero band and the footer take the
   Aurora look with the Tools accent (mint), and the page body stays on light
   paper, like My Places. Used by the tools hub, QR, IP, Password Generator,
   YouTube, Google and the word counter (not the generated converters, which
   are full Aurora dark).

   Hooks the pages carry: body.tools-aurora, .tools-hero on the hero section,
   .tools-overlap on the section after it (its card overlaps the band),
   .tools-pill on the hero's small label and .tools-return-btn in the nav.

   The pages are Tailwind, and Tailwind ships inside @layer, so these plain
   rules win without !important. Only the decorative accent shades are
   remapped to mint, listed by name: colours that carry meaning (the password
   strength meter, the green "Copied" state, success emerald-500) are left
   alone. body.tools-brand (the Google directory) keeps its content colours
   and takes the chrome only. */

body.tools-aurora {
  --accent: #6ee7b7;
  --accent-2: #34d399;
  --ink: #047857;
  --ink-hover: #065f46;
  --tint: #d1fae5;
  --tint-soft: #ecfdf5;
  --bg: #0b1324;
  --line-dark: rgba(110, 231, 183, 0.16);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f8fafc;
}

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

.tools-aurora > nav {
  background: var(--bg);
  border-bottom: 1px solid var(--line-dark);
}

/* Kit primary pill */
.tools-return-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.tools-return-btn:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
}

/* Hero: a navy Aurora band */
.tools-aurora .tools-hero {
  background:
    radial-gradient(50vw 30vw at 20% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(40vw 30vw at 90% 20%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    var(--bg);
  padding-bottom: 4.5rem;
  color: rgba(255, 255, 255, 0.72);
}

.tools-hero h1 {
  color: #fff;
}

.tools-hero p,
.tools-hero .text-slate-500,
.tools-hero .text-slate-600 {
  color: rgba(255, 255, 255, 0.72);
}

.tools-hero .gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
}

/* The tool card overlaps the band */
.tools-aurora .tools-overlap {
  position: relative;
  margin-top: -3.5rem;
  background: transparent;
}

.tools-aurora .rounded-2xl.bg-white,
.tools-aurora .rounded-3xl.bg-white {
  border-color: rgba(15, 23, 42, 0.08);
}

.tools-overlap .rounded-2xl.bg-white.shadow-lg,
.tools-overlap .featured-band {
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.3);
}

/* Light paper below the band: one quiet tone, no sky wash */
.tools-aurora section.bg-white:not(.tools-hero, .tools-overlap),
.tools-aurora section.bg-slate-50,
.tools-aurora section.from-sky-50:not(.tools-hero) {
  background: #f8fafc;
}

.tools-aurora section.bg-white + section.bg-slate-50,
.tools-aurora section.bg-slate-50 + section.bg-white {
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.tools-aurora > footer {
  background: var(--bg);
  border-top: 1px solid var(--line-dark);
}

/* No lift on hover */
.tools-aurora .card-hover:hover {
  transform: none;
}

/* ---------- One accent on the light body ---------- */

body.tools-aurora:not(.tools-brand) .gradient-text {
  background: linear-gradient(90deg, var(--ink), #0f766e);
  -webkit-background-clip: text;
  background-clip: text;
}

body.tools-aurora:not(.tools-brand) .tools-hero .gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Accent ink (decorative text and icons) */
body.tools-aurora:not(.tools-brand) :is(
  .text-teal-500, .text-teal-600, .text-teal-700,
  .text-sky-600, .text-sky-700,
  .text-amber-600, .text-amber-700,
  .text-emerald-600,
  .text-rose-400, .text-rose-500, .text-rose-600, .text-rose-700,
  .text-red-600, .text-red-700,
  .text-purple-600,
  .text-violet-500, .text-violet-600,
  .text-indigo-500, .text-indigo-600,
  .text-blue-600
) {
  color: var(--ink);
}

body.tools-aurora:not(.tools-brand) :is(
  .hover\:text-teal-700, .hover\:text-sky-600,
  .group:hover .group-hover\:text-teal-700, .group:hover .group-hover\:text-sky-700,
  .group:hover .group-hover\:text-rose-700, .group:hover .group-hover\:text-red-600,
  .group:hover .group-hover\:text-red-700, .group:hover .group-hover\:text-blue-700,
  .group:hover .group-hover\:text-amber-700
):hover,
body.tools-aurora:not(.tools-brand) .group:hover :is(
  .group-hover\:text-teal-700, .group-hover\:text-sky-700, .group-hover\:text-rose-700,
  .group-hover\:text-red-600, .group-hover\:text-red-700, .group-hover\:text-blue-700,
  .group-hover\:text-amber-700
) {
  color: var(--ink-hover);
}

/* Icon tiles and soft tints */
body.tools-aurora:not(.tools-brand) :is(
  .bg-teal-100, .bg-sky-100, .bg-amber-100, .bg-emerald-100,
  .bg-rose-100, .bg-red-100, .bg-purple-100, .bg-blue-100, .bg-indigo-100
) {
  background-color: var(--tint);
}

body.tools-aurora:not(.tools-brand) :is(
  .bg-teal-50, .bg-sky-50, .bg-violet-50, .bg-rose-50, .bg-red-50, .bg-indigo-50
) {
  background-color: var(--tint-soft);
}

body.tools-aurora:not(.tools-brand) .from-indigo-50 {
  --tw-gradient-from: var(--tint-soft);
}

body.tools-aurora:not(.tools-brand) :is(.border-red-100, .border-indigo-100) {
  border-color: color-mix(in srgb, var(--accent) 45%, white);
}

body.tools-aurora:not(.tools-brand) .hover\:border-red-200:hover,
body.tools-aurora .hover\:border-sky-300:hover {
  border-color: color-mix(in srgb, var(--accent-2) 60%, white);
}

/* Focus rings */
body.tools-aurora :is(
  .focus\:ring-teal-500, .focus\:ring-violet-500, .focus\:ring-rose-500, .focus\:ring-red-500
):focus {
  --tw-ring-color: var(--accent-2);
}

/* Primary buttons: the kit's soft pill, in mint with dark-green ink. Each
   page's own button colour is listed (the YouTube page's red only there:
   red-500 is the password meter's "weak"). */
.tools-aurora :is(.bg-sky-500, .bg-teal-500, .bg-violet-500, .bg-indigo-500),
.tools-aurora.tools-youtube .bg-red-500,
.tools-aurora .size-btn.active {
  background-color: color-mix(in srgb, var(--accent) 30%, white);
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  color: var(--ink);
  border-radius: 999px;
}

.tools-aurora :is(.bg-sky-500, .bg-teal-500, .bg-violet-500, .bg-indigo-500) svg,
.tools-aurora.tools-youtube .bg-red-500 svg {
  color: var(--ink);
}

.tools-aurora :is(.hover\:bg-sky-600, .hover\:bg-teal-600, .hover\:bg-violet-600, .hover\:bg-indigo-600):hover,
.tools-aurora.tools-youtube .hover\:bg-red-600:hover {
  background-color: color-mix(in srgb, var(--accent) 45%, white);
}

/* Secondary buttons: a quiet white pill */
.tools-aurora .size-btn:not(.active),
.tools-aurora button.bg-slate-100,
.tools-aurora a.bg-white.border-2 {
  background-color: #fff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  color: #1e293b;
  border-radius: 999px;
}

.tools-aurora .size-btn:not(.active):hover,
.tools-aurora button.bg-slate-100:hover,
.tools-aurora a.bg-white.border-2:hover {
  background-color: #f1f5f9;
}

/* The hero's small label, last so it beats the body tints above (same
   specificity, later rule) */
body.tools-aurora .tools-hero .tools-pill {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
}

/* Native checkboxes and sliders in the accent */
body.tools-aurora:not(.tools-brand) :is(input[type="checkbox"], input[type="range"]) {
  accent-color: var(--ink);
}