/*
 * ToolStack AI — shared component styles.
 *
 * Tailwind is loaded from the CDN and covers everything else; this file exists
 * only for the handful of things the CDN build cannot express (keyframes) and
 * for the FAQ disclosure marker on tool pages.
 */

@keyframes ts-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes ts-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

.ts-toast     { animation: ts-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.ts-toast-out { animation: ts-toast-out 220ms ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
  .ts-toast,
  .ts-toast-out { animation: none; }
}

/* FAQ disclosure: hide the native marker and use a rotating +/- affordance. */
.ts-faq summary { list-style: none; cursor: pointer; }
.ts-faq summary::-webkit-details-marker { display: none; }

.ts-faq summary::after {
  content: '+';
  float: right;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: #9ca3af;
  transition: color 150ms ease;
}

.ts-faq[open] summary::after { content: '\2212'; }
.ts-faq summary:hover::after { color: #FBBF24; }

/* ------------------------------------------------------------------ theme */

/*
 * The markup is written dark-first: every surface is a literal `bg-gray-950`,
 * `border-gray-800`, `text-gray-300`. There is not a single `dark:` variant to
 * switch on, so the theme toggle would otherwise flip a class and change
 * nothing.
 *
 * The light theme is a magenta poster — a deep magenta-red page carrying
 * bright yellow cards. It is built in two layers, and that split is the whole
 * mechanism:
 *
 *   1. SHELL  the page, header, footer, filter chips. Deep magenta #BE123C,
 *             light rose type, bright yellow accents.
 *   2. CARD   the inside of anything carrying bg-gray-900 or bg-gray-900/60 —
 *             every tool card, FAQ disclosure, result tile, panel. Bright
 *             yellow #FEF08A with near-black type and electric-blue accents.
 *
 * Layer 2 is written entirely as descendant rules, so it outranks layer 1 on
 * specificity — `html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60)
 * .text-gray-400` is (0,3,1) against the shell's (0,2,1) — and the whole
 * interior of every card flips to dark-on-yellow without one class being added
 * to the markup.
 *
 * No !important is needed anywhere: every rule here outranks both the Tailwind
 * CDN utility it replaces (0,1,0) and that utility's hover: variant (0,2,0) on
 * specificity alone, so the order the CDN injects its stylesheet cannot matter.
 *
 * Colours written as arbitrary values in the markup — the chat mockup's
 * bg-[#0b141a] and friends — are deliberately NOT listed and so keep their own
 * colour in both themes.
 *
 * Contrast, against #BE123C for the shell and #FEF08A for the cards:
 *   white 6.3:1 · rose-100 5.3:1 · rose-200 4.5:1 · brand yellow 4.8:1
 *   on yellow: #000000 19.6:1 · #111827 16.4:1 · #1F2937 12.6:1 · blue-700 5.8:1
 * The amber and blue text weights the markup uses are tuned for a near-black
 * page (2:1 on white, 1.2:1 on magenta), which is why both layers re-cut them.
 * The card layer goes further than a re-cut: every text weight inside a card —
 * title, body, tag, badge, button label — lands in the near-black range, since
 * a poster palette only works when the small print on it is as legible as the
 * headline.
 */

/* ============================================================ 1. the shell */

html:not(.dark) body { background-color: #BE123C; color: #FFF1F2; }

/* Surfaces. bg-gray-950 is the page, the footer and the sticky header bar; the
   translucent variants are the panels that float over them. */
html:not(.dark) .bg-gray-950     { background-color: #BE123C; }
html:not(.dark) .bg-gray-950\/80 { background-color: rgba(159, 18, 57, 0.88); }
html:not(.dark) .bg-gray-950\/60 { background-color: rgba(255, 251, 235, 0.75); }
html:not(.dark) .bg-gray-950\/50 { background-color: rgba(255, 251, 235, 0.55); }

/* The header is translucent magenta over a magenta page, so it needs a border
   to keep its edge. Same for the footer, which takes the deeper magenta. */
html:not(.dark) footer.bg-gray-950 { background-color: #9F1239; }

/* bg-gray-800 is the "recessed" surface — the keyboard hint, progress-bar
   tracks, avatar circles, file-input buttons. A translucent ink wash is used
   rather than a fixed colour because it reads correctly on both layers: it
   shades the magenta and it shades the yellow. */
html:not(.dark) .bg-gray-800 { background-color: rgba(15, 23, 42, 0.10); }

/* ...except the "/" hint in the nav, which sits on the dark header bar and
   would vanish as an ink wash. The element selector outranks the utility. */
html:not(.dark) header kbd {
  background-color: rgba(255, 255, 255, 0.22);
  color: #FFF1F2;
}

/* Borders on magenta: white hairlines at every weight, doubling as the
   separator under the header and above the footer. */
html:not(.dark) .border-gray-900     { border-color: rgba(255, 255, 255, 0.18); }
html:not(.dark) .border-gray-800     { border-color: rgba(255, 255, 255, 0.24); }
html:not(.dark) .border-gray-800\/60 { border-color: rgba(255, 255, 255, 0.18); }
html:not(.dark) .border-gray-800\/50 { border-color: rgba(255, 255, 255, 0.14); }
html:not(.dark) .border-gray-700     { border-color: rgba(255, 255, 255, 0.40); }
html:not(.dark) .border-gray-700\/80 { border-color: rgba(255, 255, 255, 0.40); }
html:not(.dark) .hover\:border-gray-700\/80:hover { border-color: rgba(255, 255, 255, 0.55); }

/* Text on magenta. The scale is compressed into 4.5–6.3:1, so every weight
   stays legible and the hierarchy survives as a difference in brightness
   rather than in opacity — an opacity ladder would push the small print off
   the bottom of the range entirely. */
html:not(.dark) .text-gray-50  { color: #FFFFFF; }
html:not(.dark) .text-gray-100 { color: #FFFFFF; }
html:not(.dark) .text-gray-200 { color: #FFF1F2; }
html:not(.dark) .text-gray-300 { color: #FFE4E6; }
html:not(.dark) .text-gray-400 { color: #FFE4E6; }
html:not(.dark) .text-gray-500 { color: #FECDD3; }
html:not(.dark) .text-gray-600 { color: #FECDD3; }
/* text-gray-700 is only ever the breadcrumb's "/" separator — a hairline glyph
   that has to stay quiet, so it sits below the readable range on purpose. */
html:not(.dark) .text-gray-700 { color: #FDA4AF; }

/* Hovers and form chrome. A translucent white wash lifts whatever it lands on
   without needing to know which layer it is on. */
html:not(.dark) .hover\:bg-gray-900\/90:hover { background-color: #FDE047; }
html:not(.dark) .hover\:bg-gray-900:hover     { background-color: rgba(255, 255, 255, 0.20); }
html:not(.dark) .hover\:bg-gray-700:hover     { background-color: rgba(15, 23, 42, 0.18); }
html:not(.dark) .hover\:bg-gray-800:hover     { background-color: rgba(15, 23, 42, 0.18); }
html:not(.dark) .hover\:text-gray-200:hover   { color: #FFFFFF; }
html:not(.dark) .placeholder-gray-600::placeholder { color: #FECDD3; }
html:not(.dark) .file\:bg-gray-800::file-selector-button { background-color: rgba(15, 23, 42, 0.12); }
html:not(.dark) .file\:text-gray-200::file-selector-button { color: #0F172A; }
html:not(.dark) .hover\:file\:bg-gray-700:hover::file-selector-button { background-color: rgba(15, 23, 42, 0.22); }

/* The dark theme leans on heavy shadows to separate surfaces; on magenta the
   same shadows read as grime. Cards lift on a deep maroon one instead. */
html:not(.dark) .shadow-2xl    { box-shadow: 0 10px 30px -12px rgba(76, 5, 25, 0.45); }
html:not(.dark) .shadow-inner  { box-shadow: inset 0 1px 3px rgba(76, 5, 25, 0.22); }
html:not(.dark) .shadow-brand-500\/5,
html:not(.dark) .shadow-brand-500\/10,
html:not(.dark) .shadow-brand-500\/20 { box-shadow: 0 10px 24px -14px rgba(76, 5, 25, 0.5); }

/* Focus rings. Amber on magenta is muddy; a white ring is unambiguous, and the
   card layer swaps it for blue where the surface is yellow. */
html:not(.dark) .ring-brand-500 { --tw-ring-color: #FFFFFF; }

/*
 * Amber and blue, re-cut for a magenta page.
 *
 * The markup carries the brand in 400-weight utilities — amber for anything
 * interactive. On magenta, amber lands at 1.4:1 and is invisible, so the
 * shell promotes it to the brand yellow (#FDE047, 4.8:1) for the wordmark and
 * list markers, and to plain white for links, which need the most contrast.
 */
html:not(.dark) .text-brand-500 { color: #FDE047; }
html:not(.dark) .text-brand-400 { color: #FDE047; }
html:not(.dark) .text-brand-300 { color: #FFFFFF; }
html:not(.dark) .hover\:text-brand-400:hover { color: #FFFFFF; }
html:not(.dark) .hover\:text-brand-300:hover { color: #FFFFFF; }

/* Tint fills — the pale wash behind an icon tile or a text button. */
html:not(.dark) .bg-brand-500\/10 { background-color: rgba(255, 255, 255, 0.16); }
html:not(.dark) .bg-brand-500\/20,
html:not(.dark) .hover\:bg-brand-500\/20:hover { background-color: rgba(255, 255, 255, 0.28); }

/* Primary action fill: electric blue. The markup labels these buttons
   text-gray-950 — near-black, which is 3.3:1 on #2563EB — so the label is
   flipped to white at the bottom of this section instead of in 28 places in
   the markup. */
html:not(.dark) .bg-brand-500,
html:not(.dark) .hover\:bg-brand-500:hover { background-color: #2563EB; }
html:not(.dark) .hover\:bg-brand-600:hover { background-color: #1D4ED8; }

/* Borders. A white hairline at rest; brand yellow once the pointer is on a
   link or a filled button. */
html:not(.dark) .border-brand-500\/20 { border-color: rgba(255, 255, 255, 0.26); }
html:not(.dark) .border-brand-500\/25 { border-color: rgba(255, 255, 255, 0.30); }
html:not(.dark) .border-brand-500\/30,
html:not(.dark) .border-brand-500\/40 { border-color: rgba(255, 255, 255, 0.44); }
html:not(.dark) .border-brand-500,
html:not(.dark) .border-brand-500\/50,
html:not(.dark) .hover\:border-brand-500:hover,
html:not(.dark) .hover\:border-brand-500\/40:hover,
html:not(.dark) .hover\:border-brand-500\/50:hover { border-color: #FDE047; }

/* Support CTA — a clean white chip, so it reads as the one solid control in a
   nav bar that is otherwise magenta. Warms to orange on hover. */
html:not(.dark) .ts-cta-support {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #BE123C;
}
html:not(.dark) .ts-cta-support:hover {
  background-color: #FFEDD5;
  border-color: #EA580C;
  color: #C2410C;
}

/* Category filter chips are literal bg-gray-900 (and the active one literal
   bg-brand-500 text-gray-950), which the card layer would otherwise paint
   yellow, and which the filled-button rule at the end of this section would
   otherwise label white. On the magenta page they are chrome rather than
   content: a white chip carrying near-black type, and the active one the brand
   yellow — both at reading contrast rather than at decoration contrast.

   The extra compound selectors are load-bearing, not belt-and-braces. The
   utilities in the markup are `.bg-gray-900` (0,2,1) and `.bg-brand-500
   .text-gray-950` (0,3,1); a bare `.filter-btn` rule ties the first and loses
   to the second on source order, which is how the chips ended up yellow-on-
   yellow and the active chip white-on-yellow. Matching the utility in the
   selector lands each rule at (0,3,1) and (0,4,1) and settles both. */
html:not(.dark) .filter-btn,
html:not(.dark) .filter-btn.bg-gray-900,
html:not(.dark) .filter-btn.text-gray-400 {
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #111827;
}
html:not(.dark) .filter-btn:hover,
html:not(.dark) .filter-btn.bg-gray-900:hover,
html:not(.dark) .filter-btn.text-gray-400:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
}
html:not(.dark) .filter-btn.active,
html:not(.dark) .filter-btn.active.bg-brand-500,
html:not(.dark) .filter-btn.active.text-gray-950 {
  background-color: #FDE047;
  border-color: #FDE047;
  color: #000000;
}

/* The nav's search control is declared bg-gray-900/80, which the card layer
   would paint as a yellow surface. It is chrome on the dark header bar, so it
   is pinned to white here. The id selector outranks every class rule in this
   file, including the layer-2 ones, which is why no descendant rule can leak
   into it. */
html:not(.dark) #searchInput {
  background-color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.7);
  color: #0F172A;
  --tw-ring-color: #2563EB;
}
html:not(.dark) #searchInput::placeholder { color: #64748B; }

/* ============================================================= 2. the cards */

/*
 * A card is any element carrying bg-gray-900 or bg-gray-900/60. Inside one the
 * palette inverts to near-black type on bright yellow.
 *
 * Every rule in this section is a descendant rule, which is what makes the
 * flip automatic and what keeps it off the shell: the ancestor list is the
 * contract, and an element is either inside one of those surfaces or it is
 * not.
 */

html:not(.dark) .bg-gray-900      { background-color: #FEF08A; }
html:not(.dark) .bg-gray-900\/60  { background-color: #FEF08A; }
html:not(.dark) .bg-gray-900\/80  { background-color: #FFFFFF; }

/* A card's own border, which no descendant rule can reach — the element that
   carries the fill is the element that carries the border. The deeper yellow
   reads as a deliberate edge where the shell's white hairline would read as a
   halo. Ties with the .border-gray-800 rule above and so must come after it;
   the two nav controls are pinned by id, and .filter-btn by its own rule. */
html:not(.dark) .bg-gray-900,
html:not(.dark) .bg-gray-900\/60 { border-color: #FDE047; }

/* A panel nested inside a card — the second tool section on a page, an input
   drawn as a field — would otherwise be yellow on yellow. It becomes a warm
   cream instead, one step lighter than the card it sits on. */
html:not(.dark) .bg-gray-900 .bg-gray-900,
html:not(.dark) .bg-gray-900 .bg-gray-900\/60 { background-color: #FFFBEB; }

/* Form fields inside a card: white, with the card's own blue focus ring. */
html:not(.dark) .bg-gray-900 .bg-gray-950    { background-color: #FFFFFF; }
html:not(.dark) .bg-gray-900 .bg-gray-950\/60,
html:not(.dark) .bg-gray-900 .bg-gray-950\/50 { background-color: #FFFBEB; }

/* Borders inside a card are yellow rather than the shell's white hairline,
   which would read as a highlight against the yellow fill. */
html:not(.dark) .bg-gray-900 .border-gray-900,
html:not(.dark) .bg-gray-900 .border-gray-800,
html:not(.dark) .bg-gray-900 .border-gray-800\/60,
html:not(.dark) .bg-gray-900 .border-gray-800\/50 { border-color: #FDE047; }
html:not(.dark) .bg-gray-900 .border-gray-700,
html:not(.dark) .bg-gray-900 .border-gray-700\/80 { border-color: #FACC15; }

/* Type inside a card. Every weight is near-black: on a bright yellow fill the
   dark theme's slate ladder reads as a grey wash rather than as type, so the
   ramp is compressed into #000000 → #374151 and the hierarchy is carried by
   size and weight instead of by lightness. Contrast against #FEF08A:
   #000000 19.6:1 · #111827 16.4:1 · #1F2937 12.6:1 · #374151 8.4:1 — all far
   past the 4.5:1 floor, which is the point of a poster palette. */
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-50  { color: #000000; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-100 { color: #000000; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-200 { color: #111827; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-300 { color: #111827; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-400 { color: #111827; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-500 { color: #1F2937; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-600 { color: #374151; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-gray-700 { color: #374151; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .hover\:text-gray-200:hover { color: #000000; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-brand-500 { color: #1D4ED8; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-brand-400 { color: #1D4ED8; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-brand-300 { color: #1E40AF; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .hover\:text-brand-400:hover { color: #1E40AF; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .hover\:text-brand-300:hover { color: #1E40AF; }

/* The electric blue the shell cannot use (1.2:1 on magenta) is 5.8:1 on
   yellow, so a card is exactly where it belongs. Tints follow it. */
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .bg-brand-500\/10 { background-color: #DBEAFE; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .bg-brand-500\/20,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .hover\:bg-brand-500\/20:hover { background-color: #BFDBFE; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .border-brand-500\/20 { border-color: #BFDBFE; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .border-brand-500\/25 { border-color: #BFDBFE; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .border-brand-500\/30,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .border-brand-500\/40 { border-color: #93C5FD; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .border-brand-500,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .border-brand-500\/50 { border-color: #2563EB; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .ring-brand-500 { --tw-ring-color: #2563EB; }

/* Secondary buttons — the "Clear" beside every "Run". Warm cream, which is the
   second accent the light theme is built on, carrying the same near-black label
   as the card it sits on: the orange text this used to have was 3.4:1 on its
   own fill, which is the one place a button label was harder to read than the
   paragraph next to it.

   This ties on specificity with the type ladder above, so it has to come after
   it, as does the toast below. */
html:not(.dark) .bg-gray-800.hover\:bg-gray-700 {
  background-color: #FFF7ED;
  color: #111827;
}
html:not(.dark) .bg-gray-800.hover\:bg-gray-700:hover {
  background-color: #FFEDD5;
  color: #000000;
}

/* Semantic status colours. Tools paint these as inline utility strings, and
   they only ever appear inside a card, so the dark weights are correct as-is;
   they are listed at all only to prove the set is closed. */
html:not(.dark) .text-emerald-400,
html:not(.dark) .text-emerald-400\/90,
html:not(.dark) .text-emerald-500 { color: #047857; }
html:not(.dark) .bg-emerald-500\/5  { background-color: #F0FDF4; }
html:not(.dark) .bg-emerald-500\/10 { background-color: #ECFDF5; }
html:not(.dark) .bg-emerald-500     { background-color: #059669; }
html:not(.dark) .bg-emerald-600     { background-color: #047857; }
html:not(.dark) .border-emerald-500\/20 { border-color: #A7F3D0; }

html:not(.dark) .text-rose-400 { color: #BE123C; }
html:not(.dark) .bg-rose-500\/5  { background-color: #FFF5F6; }
html:not(.dark) .bg-rose-500\/10 { background-color: #FFF1F2; }
html:not(.dark) .bg-rose-500     { background-color: #E11D48; }
html:not(.dark) .border-rose-500\/20 { border-color: #FECDD3; }

html:not(.dark) .text-red-300,
html:not(.dark) .text-red-400 { color: #B91C1C; }
html:not(.dark) .text-red-500 { color: #DC2626; }
html:not(.dark) .text-red-600 { color: #B91C1C; }
html:not(.dark) .bg-red-500\/10 { background-color: #FEF2F2; }
html:not(.dark) .bg-red-500     { background-color: #DC2626; }
html:not(.dark) .border-red-500\/20,
html:not(.dark) .border-red-500\/30 { border-color: #FECACA; }

html:not(.dark) .text-amber-300,
html:not(.dark) .text-amber-400 { color: #B45309; }
html:not(.dark) .text-yellow-200 { color: #A16207; }
html:not(.dark) .bg-amber-500\/10 { background-color: #FFFBEB; }
html:not(.dark) .bg-amber-500     { background-color: #F59E0B; }
html:not(.dark) .bg-yellow-500\/20 { background-color: #FEF9C3; }
html:not(.dark) .bg-yellow-500\/40 { background-color: #FDE68A; }
html:not(.dark) .bg-amber-500\/50   { background-color: #FDE68A; }
html:not(.dark) .border-amber-500\/20,
html:not(.dark) .border-amber-500\/30 { border-color: #FDE68A; }
html:not(.dark) .border-yellow-500\/50 { border-color: #FDE047; }

html:not(.dark) .text-sky-400 { color: #0369A1; }
html:not(.dark) .bg-sky-500\/10 { background-color: #F0F9FF; }
html:not(.dark) .bg-sky-500     { background-color: #0284C7; }
html:not(.dark) .border-sky-500\/20 { border-color: #BAE6FD; }

html:not(.dark) .text-violet-400 { color: #6D28D9; }
html:not(.dark) .bg-violet-500\/10 { background-color: #F5F3FF; }
html:not(.dark) .border-violet-500\/20 { border-color: #DDD6FE; }

html:not(.dark) .text-teal-400 { color: #0F766E; }
html:not(.dark) .bg-teal-500\/10 { background-color: #F0FDFA; }
html:not(.dark) .border-teal-500\/20 { border-color: #99F6E4; }

html:not(.dark) .text-pink-400 { color: #BE185D; }
html:not(.dark) .text-pink-500 { color: #DB2777; }
html:not(.dark) .bg-pink-500\/10 { background-color: #FDF2F8; }
html:not(.dark) .border-pink-500\/20 { border-color: #FBCFE8; }

/* Status pills and error lines, re-cut for the card. A badge is written
   `bg-emerald-500/10 text-emerald-400`, so its label is read against a pale
   wash of its own hue, not against the yellow behind it. The mid-shades above
   are tuned for the dark page and sit near 4.5:1 on that wash; these deep ones
   clear 8:1 and read at a glance as the near-black the rest of the card uses,
   while the hue that separates "active" from "error" survives in both the word
   and the fill. */
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-emerald-400,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-emerald-400\/90,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-emerald-500 { color: #064E3B; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-red-300,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-red-400,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-red-500,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-red-600 { color: #7F1D1D; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-rose-400 { color: #881337; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-amber-300,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-amber-400,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-yellow-200 { color: #78350F; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-sky-400 { color: #0C4A6E; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-violet-400 { color: #4C1D95; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-teal-400 { color: #134E4A; }
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-pink-400,
html:not(.dark) :is(.bg-gray-900, .bg-gray-900\/60) .text-pink-500 { color: #831843; }

/* Every tool card hovers to the same yellow border via a utility, which is
   invisible on a yellow card. Give each category its own deep hue so the hover
   state reads and the sections are tellable apart at a glance. These outrank
   both the utility and the rule below. */
html:not(.dark) .tool-card:hover { border-color: #1D4ED8; }
html:not(.dark) .tool-card[data-category="client"]:hover  { border-color: #2563EB; }
html:not(.dark) .tool-card[data-category="sales"]:hover   { border-color: #E11D48; }
html:not(.dark) .tool-card[data-category="ai"]:hover      { border-color: #7C3AED; }
html:not(.dark) .tool-card[data-category="seo"]:hover     { border-color: #EA580C; }
html:not(.dark) .tool-card[data-category="creator"]:hover { border-color: #DB2777; }
html:not(.dark) .tool-card[data-category="fun"]:hover     { border-color: #0D9488; }
html:not(.dark) .tool-card[data-category="pdf"]:hover     { border-color: #B91C1C; }

/* Cards lift a little harder than the shell's shadow. */
html:not(.dark) .tool-card {
  box-shadow: 0 1px 0 rgba(76, 5, 25, 0.18);
}
html:not(.dark) .tool-card:hover { box-shadow: 0 14px 30px -16px rgba(76, 5, 25, 0.6); }

/* The support card's amber-to-transparent wash. Tailwind CDN builds gradients
   from custom properties; redefining them is the only way to re-tint one from
   outside. Inert if the property names ever change. */
html:not(.dark) .from-brand-500\/10 {
  --tw-gradient-from: #DBEAFE;
  --tw-gradient-to: rgba(219, 234, 254, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* The toast is appended to <body>, so it is outside every card and would get
   the shell's white type on the card layer's yellow fill. It is painted as a
   card in its own right: yellow surface, near-black label.

   Ties with the .bg-gray-900 utility rule above, so it must come after it. */
html:not(.dark) .ts-toast {
  background-color: #FEF08A;
  border-color: #2563EB;
  color: #0F172A;
}

/* Every filled button is bg-brand-500 + text-gray-950. The label is flipped to
   white here rather than in the markup. Last in the section: it ties with the
   type ladder above and has to win. */
html:not(.dark) .bg-brand-500.text-gray-950,
html:not(.dark) .bg-brand-500 .text-gray-950 { color: #FFFFFF; }

/* Theme toggle: both glyphs are always in the DOM and CSS picks one, so the
   correct icon is painted on the very first frame. */
.ts-theme-light { display: none; }
html:not(.dark) .ts-theme-dark  { display: none; }
html:not(.dark) .ts-theme-light { display: inline; }