/* ================================================================
   TOOLSHUB4U — CORE PAGES DESIGN SYSTEM
   Scoped under body[data-site-page="core-page"].
   Safe to load on every page: tool pages without the attribute
   receive zero core styles.
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --th4u-bg: #080c18;
  --th4u-surface: #0e1626;
  --th4u-surface-soft: rgba(14, 22, 38, .6);
  --th4u-text: #e7ecf5;
  --th4u-text-secondary: #9aa8bd;
  --th4u-text-tertiary: #64748b;
  --th4u-primary: #6366f1;
  --th4u-primary-light: #818cf8;
  --th4u-primary-50: rgba(99, 102, 241, .12);
  --th4u-accent: #22d3ee;
  --th4u-border: rgba(148, 163, 184, .16);
  --th4u-border-strong: rgba(148, 163, 184, .28);
  --th4u-radius-sm: 8px;
  --th4u-radius-md: 12px;
  --th4u-radius-lg: 18px;
  --th4u-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --th4u-shadow-md: 0 6px 24px rgba(0, 0, 0, .4);
  --th4u-shadow-lg: 0 12px 48px rgba(0, 0, 0, .5);
  --th4u-depth-1: 0 4px 12px rgba(0, 0, 0, .25);
  --th4u-depth-2: 0 8px 26px rgba(0, 0, 0, .35);
  --th4u-depth-3: 0 16px 48px rgba(0, 0, 0, .45);
  --th4u-glass: rgba(14, 22, 38, .72);
  --th4u-glass-border: rgba(148, 163, 184, .12);
  --th4u-duration-fast: .15s;
  --th4u-duration-normal: .25s;
  --th4u-duration-slow: .4s;
  --th4u-ease-standard: cubic-bezier(.25, .1, .25, 1);
  --th4u-ease-emphasis: cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="light"] {
  --th4u-bg: #f3f5fb;
  --th4u-surface: #ffffff;
  --th4u-surface-soft: rgba(255, 255, 255, .7);
  --th4u-text: #0b1120;
  --th4u-text-secondary: #475569;
  --th4u-text-tertiary: #94a3b8;
  --th4u-border: rgba(71, 85, 105, .12);
  --th4u-border-strong: rgba(71, 85, 105, .22);
  --th4u-shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
  --th4u-shadow-md: 0 6px 24px rgba(0, 0, 0, .1);
  --th4u-shadow-lg: 0 12px 48px rgba(0, 0, 0, .12);
  --th4u-depth-1: 0 2px 6px rgba(0, 0, 0, .06);
  --th4u-depth-2: 0 6px 16px rgba(0, 0, 0, .08);
  --th4u-depth-3: 0 12px 32px rgba(0, 0, 0, .1);
  --th4u-glass: rgba(255, 255, 255, .75);
  --th4u-glass-border: rgba(71, 85, 105, .08);
}

/* ── Brand-logo icons (new class; safe everywhere) ─────────── */
/* Base .icon uses fill:none; brand glyphs are filled single-path. */
.icon--brand {
  fill: currentColor;
  stroke: none;
}

/* ── Scope: only core pages get the redesign ───────────────── */
body[data-site-page="core-page"] {
  background: var(--th4u-bg);
  color: var(--th4u-text);
}

/* ── HEADER — glass, sticky, scroll-aware ──────────────────── */
body[data-site-page="core-page"] .header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--th4u-glass);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--th4u-glass-border);
  transition: box-shadow var(--th4u-duration-normal) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .header--scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}

/* Nav link animations */
body[data-site-page="core-page"] .nav__link {
  position: relative;
  transition: color var(--th4u-duration-fast) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--th4u-primary);
  transform: scaleX(0);
  transition: transform var(--th4u-duration-normal) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .nav__link:hover::after,
body[data-site-page="core-page"] .nav__link:focus-visible::after { transform: scaleX(1); }
body[data-site-page="core-page"] .nav__link--active::after { transform: scaleX(1); background: var(--th4u-accent); }

/* Theme toggle rotation */
body[data-site-page="core-page"] .theme-toggle {
  transition: transform var(--th4u-duration-slow) var(--th4u-ease-emphasis);
}
body[data-site-page="core-page"] .theme-toggle:hover { transform: rotate(30deg) scale(1.1); }
body[data-site-page="core-page"] .theme-toggle:active { transform: rotate(30deg) scale(.95); }

/* Contact form: visible Submitting state while the mail app is handed the
   message. main.js sets aria-busy for at least one paint, so this is
   observable rather than decorative. */
body[data-site-page="core-page"] .form-submit[aria-busy="true"] {
  opacity: .65;
  cursor: progress;
}

/* ── HERO — 3D depth + pointer parallax ─────────────────────── */
body[data-site-page="core-page"] .hero {
  position: relative;
  perspective: 1200px;
  overflow: hidden;
}
body[data-site-page="core-page"] .hero__bg {
  transform-style: preserve-3d;
}
body[data-site-page="core-page"] .hero__orb {
  transition: transform .8s var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .hero__orb--1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .18), transparent 70%);
  opacity: .6;
}
body[data-site-page="core-page"] .hero__orb--2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at 70% 40%, rgba(34, 211, 238, .14), transparent 70%);
  opacity: .5;
}
body[data-site-page="core-page"] .hero__orb--3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, .12), transparent 70%);
  opacity: .4;
}
body[data-site-page="core-page"] .hero__dots {
  opacity: .35;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 70%);
}

body[data-site-page="core-page"] .hero__float {
  background: var(--th4u-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--th4u-glass-border);
  border-radius: var(--th4u-radius-md);
  box-shadow: var(--th4u-depth-1);
  transition: transform var(--th4u-duration-slow) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .hero__float:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--th4u-depth-2);
}

body[data-site-page="core-page"] .hero__badge {
  background: var(--th4u-primary-50);
  border: 1px solid var(--th4u-primary-50);
  color: var(--th4u-primary-light);
  box-shadow: var(--th4u-depth-1);
}

body[data-site-page="core-page"] .hero__stat {
  background: var(--th4u-surface-soft);
  border: 1px solid var(--th4u-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--th4u-radius-md);
  transition: transform var(--th4u-duration-fast) var(--th4u-ease-standard),
              box-shadow var(--th4u-duration-fast) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .hero__stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--th4u-depth-2);
}

/* Launcher card */
body[data-site-page="core-page"] .launcher {
  background: var(--th4u-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--th4u-glass-border);
  border-radius: var(--th4u-radius-lg);
  box-shadow: var(--th4u-depth-2);
  transition: box-shadow var(--th4u-duration-normal);
}
body[data-site-page="core-page"] .launcher:hover {
  box-shadow: var(--th4u-depth-3);
}

/* Search */
body[data-site-page="core-page"] .search-box__input:focus {
  box-shadow: 0 0 0 3px var(--th4u-primary-50), 0 0 20px rgba(99, 102, 241, .12);
}

/* Tags */
body[data-site-page="core-page"] .tag {
  transition: transform var(--th4u-duration-fast) var(--th4u-ease-standard),
              box-shadow var(--th4u-duration-fast) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .tag:hover {
  transform: translateY(-1px);
  box-shadow: var(--th4u-depth-1);
}

/* ── BUTTONS — press physics ────────────────────────────────── */
body[data-site-page="core-page"] .btn {
  transition: transform var(--th4u-duration-fast) var(--th4u-ease-standard),
              box-shadow var(--th4u-duration-fast) var(--th4u-ease-standard),
              background var(--th4u-duration-fast) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--th4u-depth-2);
}
body[data-site-page="core-page"] .btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: var(--th4u-depth-1);
}
body[data-site-page="core-page"] .btn--white {
  box-shadow: var(--th4u-depth-1);
}
body[data-site-page="core-page"] .btn--white:hover {
  box-shadow: var(--th4u-depth-2);
}

/* ── CARDS ──────────────────────────────────────────────────── */
body[data-site-page="core-page"] .cat-card,
body[data-site-page="core-page"] .tk-card,
body[data-site-page="core-page"] .tool-card,
body[data-site-page="core-page"] .other-cat-card,
body[data-site-page="core-page"] .mini-card,
body[data-site-page="core-page"] .featured-card {
  transition: transform var(--th4u-duration-fast) var(--th4u-ease-standard),
              box-shadow var(--th4u-duration-fast) var(--th4u-ease-standard);
}
body[data-site-page="core-page"] .cat-card:hover,
body[data-site-page="core-page"] .tk-card:hover,
body[data-site-page="core-page"] .tool-card:hover,
body[data-site-page="core-page"] .other-cat-card:hover,
body[data-site-page="core-page"] .featured-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--th4u-depth-3);
}
body[data-site-page="core-page"] .cat-card:hover .cat-card__icon svg,
body[data-site-page="core-page"] .tool-card:hover .tool-card__icon svg {
  transform: scale(1.12);
  transition: transform var(--th4u-duration-normal) var(--th4u-ease-emphasis);
}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.core-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--th4u-ease-standard),
              transform .6s var(--th4u-ease-standard);
}
.core-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── STAGGERED CHILD REVEAL (grids) ─────────────────────────── */
.core-stagger {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .5s var(--th4u-ease-standard),
              transform .5s var(--th4u-ease-standard);
  will-change: opacity, transform;
}
.core-stagger--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
/* The footer is a permanently dark band in both themes (main.css sets
   background:#06090f, and its brand name, column headings and social chips
   are all hardcoded white). Do NOT flip it to a light surface here: doing so
   turned white text onto a white background in light mode. Only the border
   is themed. */
body[data-site-page="core-page"] .footer {
  border-top: 1px solid rgba(148, 163, 184, .16);
}
body[data-site-page="core-page"] .footer a {
  transition: color var(--th4u-duration-fast) var(--th4u-ease-standard);
}
/* :not() excludes the social chips. Without it this selector (0,3,2) beat
   main.css's `.footer__social-link:hover { color: #fff }` (0,2,0) and painted
   the glyph indigo on the chip's indigo->violet hover gradient — the icon
   vanished at the moment you pointed at it, in both themes. */
body[data-site-page="core-page"] .footer a:not(.footer__social-link):hover {
  color: var(--th4u-primary-light);
}

/* ── CATEGORY HERO (category pages) ─────────────────────────── */
body[data-site-page="core-page"] .cat-hero__icon {
  transition: transform var(--th4u-duration-slow) var(--th4u-ease-emphasis);
}
body[data-site-page="core-page"] .cat-hero__icon:hover {
  transform: rotate(-8deg) scale(1.1);
}

/* ── ABOUT / CONTACT / LEGAL ────────────────────────────────── */
body[data-site-page="core-page"] .page-content {
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.75;
}
body[data-site-page="core-page"] .page-content h1 {
  margin-top: 2rem;
}
body[data-site-page="core-page"] .contact-form input:focus,
body[data-site-page="core-page"] .contact-form textarea:focus {
  box-shadow: 0 0 0 3px var(--th4u-primary-50);
  border-color: var(--th4u-primary);
}

/* ── BACK TO TOP ────────────────────────────────────────────── */
body[data-site-page="core-page"] .back-to-top {
  transition: opacity var(--th4u-duration-normal),
              transform var(--th4u-duration-normal) var(--th4u-ease-emphasis);
  opacity: 0;
  transform: translateY(10px);
}
body[data-site-page="core-page"] .back-to-top--visible {
  opacity: 1;
  transform: translateY(0);
}
body[data-site-page="core-page"] .back-to-top:hover {
  transform: translateY(-2px) scale(1.08);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  body[data-site-page="core-page"] .hero__orb {
    display: none;
  }
  body[data-site-page="core-page"] .hero__float {
    display: none;
  }
}
@media (max-width: 480px) {
  body[data-site-page="core-page"] .hero__stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-site-page="core-page"] .hero__orb,
  body[data-site-page="core-page"] .hero__float,
  body[data-site-page="core-page"] .cat-card,
  body[data-site-page="core-page"] .tool-card,
  body[data-site-page="core-page"] .btn,
  body[data-site-page="core-page"] .tag,
  body[data-site-page="core-page"] .hero__stat,
  body[data-site-page="core-page"] .launcher {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  .core-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .core-stagger,
  .core-stagger--in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── LIGHT THEME refinements ────────────────────────────────── */
[data-theme="light"] body[data-site-page="core-page"] .header {
  border-bottom-color: rgba(71, 85, 105, .1);
}

/* ── DARK BANNERS IN LIGHT MODE ─────────────────────────────────
   main.css documents the intent: "Hero, CTA and footer intentionally stay
   dark (banner pattern); content surfaces flip via the tokens below."

   The hero never actually implemented it. It carries color:#fff but no
   background of its own, so it borrowed the body's opaque dark --grad-hero.
   The core-page body rule above uses the `background` SHORTHAND, which resets
   background-image to none — so on core pages the hero lost that dark base
   and, in light mode, rendered white text on a near-white page.

   Fix: give the hero the same opaque dark gradient the CTA already uses, in
   both themes, so the banner is real rather than inherited.
   ============================================================== */
body[data-site-page="core-page"] .hero {
  background: var(--grad-hero);
}

/* Inside a dark banner, re-point the themed tokens at their dark values for
   light mode. Custom properties inherit, so this re-darkens every descendant
   at once — whether it is styled by main.css, home.css or this file — instead
   of enumerating children and missing some. */
[data-theme="light"] body[data-site-page="core-page"] .hero,
[data-theme="light"] body[data-site-page="core-page"] .page-hero,
[data-theme="light"] body[data-site-page="core-page"] .cta__inner {
  /* main.css token set */
  --text-primary: #f8fafc;
  --text-secondary: rgba(255, 255, 255, .74);
  --text-tertiary: rgba(255, 255, 255, .56);
  --surface: rgba(255, 255, 255, .07);
  --surface-2: rgba(255, 255, 255, .1);
  --surface-hover: rgba(255, 255, 255, .13);
  --border: rgba(255, 255, 255, .15);
  --border-light: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .24);

  /* core-pages token set */
  --th4u-text: #e7ecf5;
  --th4u-text-secondary: #9aa8bd;
  --th4u-text-tertiary: #64748b;
  --th4u-surface-soft: rgba(14, 22, 38, .6);
  --th4u-border: rgba(148, 163, 184, .16);
  --th4u-glass: rgba(14, 22, 38, .72);
  --th4u-glass-border: rgba(148, 163, 184, .12);
  --th4u-primary-light: #818cf8;
}

/* ── WHY CHOOSE — light-mode surfaces ───────────────────────────
   .glass-card is a dark translucent panel, rgba(17,26,46,.55). In light mode
   the section behind it is #f3f5fb, so the card read as muddy grey-blue while
   its title fell back to --text-primary (#0f172a) and its description to
   --text-secondary (#475569) — dark text on a dark panel. Give light mode a
   genuine light surface with a real border and a soft shadow instead.

   Two-layer shadow on purpose: a tight contact shadow plus a wide ambient one.
   Also kill backdrop-filter here — blurring a flat page buys nothing and still
   costs a compositing layer and a containing block. */
[data-theme="light"] body[data-site-page="core-page"] .glass-card {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(15, 23, 42, .09);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .06);
}
/* On a light surface, hover must ADD ink. main.css's --primary-100 hover border
   is *lighter* than the resting border once composited on white, so the outline
   faded on hover instead of sharpening — the interaction read backwards. */
[data-theme="light"] body[data-site-page="core-page"] .glass-card:hover {
  border-color: rgba(99, 102, 241, .45);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .1), 0 0 0 3px var(--th4u-primary-50);
}

/* The two decorative blobs are 520px/420px circles pinned 120px outside the
   section, which has overflow:hidden. Their fade only completes at r≈257px, so
   they are cut off at roughly half strength: on a dark page a 3% step is
   invisible, but on #f3f5fb it draws a straight grey seam along the top-left
   and bottom-right edges. That seam is the main reason the section looked
   unfinished in light mode.

   Fix: one full-bleed wash whose gradient centres sit OUTSIDE the box, so every
   on-canvas pixel is already in the falloff and there is nothing to clip. Fade
   to rgba(hue, 0) rather than the `transparent` keyword so the ramp stays
   chromatic instead of drifting through grey. Cyan is dropped in light mode —
   at low alpha on a cool off-white it loses its chroma and reads as a dirty
   green patch; indigo and violet stay recognisably brand. Dark mode keeps both
   blobs exactly as they were. */
[data-theme="light"] body[data-site-page="core-page"] .why-choose::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(900px 420px at 12% -12%, rgba(99, 102, 241, .11), rgba(99, 102, 241, 0) 62%),
    radial-gradient(760px 380px at 92% 110%, rgba(168, 85, 247, .08), rgba(168, 85, 247, 0) 62%);
}
[data-theme="light"] body[data-site-page="core-page"] .why-choose::after {
  display: none;
}

/* ── SECTION BADGE — light mode ─────────────────────────────────
   main.css paints the pill --primary-light (#818cf8) on --primary-50
   (rgba(99,102,241,.12)). Neither token is redefined for light, so on a light
   page the pill composites to ~#e2e4fa and the 12px uppercase text sits at
   2.2:1 — a pale lilac smudge inside a pale lilac pill, and the same for the
   SVG glyph beside it. Darken the ink, keep the hue, and give the pill a real
   edge: on a light surface a chip cannot rely on glow to define itself.
   Scoped to core pages — the 109 tool pages have no data-site-page attribute
   and are deliberately left on main.css's values. */
[data-theme="light"] body[data-site-page="core-page"] .section__badge {
  background: rgba(99, 102, 241, .1);
  border-color: rgba(99, 102, 241, .24);
  color: #4338ca;
}

/* ── ICON CHIPS — light mode ────────────────────────────────────
   The user's report: "in light mode tools svg icon color is little dull".

   Every icon chip on the site repeats one dark-mode recipe — a 300-level
   pastel glyph on a ~30%-alpha wash of the same hue, plus a 26px saturated
   glow and an inset white top bevel. On a dark card that is bright-on-dark and
   looks great. On a white card the wash composites to a pale pastel and the
   glyph is a *slightly different* pale pastel: #a5b4fc on ~#dfe2fb measures
   1.3:1. The glow becomes coloured haze and the bevel becomes a stray white
   streak. The recipe is duplicated in seven selector families across three
   stylesheets, and the only light-mode adjustment any of them has is a border
   tint, which fixes none of it:

     home.css   402  [data-category=*] .tool-card__icon        #a5b4fc etc.
     home.css   468  .featured-card--* .featured-card__icon    #a5b4fc etc.
     home.css   720  .whats-new__card--* .whats-new__icon      #a5b4fc etc.
     home.css   325  .cat-tile--* .cat-tile__icon              (no colour: inherits)
     tools.css 1228  .cat-tools--* .cat-card__icon             #a5b4fc etc.
     tools.css 1007  .all-cat-section[data-category=*]
                       .mini-card__icon                        #a5b4fc etc.
     pages.css  201  .about-feature:nth-child(6n+N)
                       .about-feature__icon                    #a5b4fc etc.

   Rather than restate six colours seven times, set two inherited custom
   properties on whatever ancestor carries the category, then let one rule
   consume them. Adding a category later means one token line, not seven.

   Every ink below clears 5:1 against its own wash, so the glyphs pass AA as
   text and clear the 3:1 non-text minimum with room to spare — while keeping
   each category's hue, which is what makes the six chips read as a designed
   set instead of six grey boxes.

   All seven families live only on core pages (home.css → index, tools.css →
   the category pages, pages.css → about/contact/legal), so this scope covers
   them completely and touches no tool page. Dark mode is untouched. */
[data-theme="light"] body[data-site-page="core-page"] [data-category="calculators"],
[data-theme="light"] body[data-site-page="core-page"] .cat-tile--calc,
[data-theme="light"] body[data-site-page="core-page"] .cat-tools--calc,
[data-theme="light"] body[data-site-page="core-page"] .featured-card--indigo,
[data-theme="light"] body[data-site-page="core-page"] .whats-new__card--indigo,
[data-theme="light"] body[data-site-page="core-page"] .about-feature:nth-child(6n+1) {
  --ci-hue: 99, 102, 241;
  --ci-ink: #4338ca;
}
[data-theme="light"] body[data-site-page="core-page"] [data-category="text"],
[data-theme="light"] body[data-site-page="core-page"] .cat-tile--text,
[data-theme="light"] body[data-site-page="core-page"] .cat-tools--text,
[data-theme="light"] body[data-site-page="core-page"] .featured-card--emerald,
[data-theme="light"] body[data-site-page="core-page"] .whats-new__card--emerald,
[data-theme="light"] body[data-site-page="core-page"] .about-feature:nth-child(6n+2) {
  --ci-hue: 16, 185, 129;
  --ci-ink: #065f46;
}
[data-theme="light"] body[data-site-page="core-page"] [data-category="pdf"],
[data-theme="light"] body[data-site-page="core-page"] .cat-tile--pdf,
[data-theme="light"] body[data-site-page="core-page"] .cat-tools--pdf,
[data-theme="light"] body[data-site-page="core-page"] .featured-card--rose,
[data-theme="light"] body[data-site-page="core-page"] .whats-new__card--rose,
[data-theme="light"] body[data-site-page="core-page"] .about-feature:nth-child(6n+3) {
  --ci-hue: 239, 68, 68;
  --ci-ink: #b91c1c;
}
[data-theme="light"] body[data-site-page="core-page"] [data-category="seo"],
[data-theme="light"] body[data-site-page="core-page"] .cat-tile--seo,
[data-theme="light"] body[data-site-page="core-page"] .cat-tools--seo,
[data-theme="light"] body[data-site-page="core-page"] .featured-card--amber,
[data-theme="light"] body[data-site-page="core-page"] .whats-new__card--amber,
[data-theme="light"] body[data-site-page="core-page"] .about-feature:nth-child(6n+4) {
  --ci-hue: 245, 158, 11;
  --ci-ink: #92400e;
}
[data-theme="light"] body[data-site-page="core-page"] [data-category="developer"],
[data-theme="light"] body[data-site-page="core-page"] .cat-tile--dev,
[data-theme="light"] body[data-site-page="core-page"] .cat-tools--dev,
[data-theme="light"] body[data-site-page="core-page"] .featured-card--cyan,
[data-theme="light"] body[data-site-page="core-page"] .whats-new__card--cyan,
[data-theme="light"] body[data-site-page="core-page"] .about-feature:nth-child(6n+5) {
  --ci-hue: 6, 182, 212;
  --ci-ink: #155e75;
}
[data-theme="light"] body[data-site-page="core-page"] [data-category="games"],
[data-theme="light"] body[data-site-page="core-page"] .cat-tile--games,
[data-theme="light"] body[data-site-page="core-page"] .cat-tools--games,
[data-theme="light"] body[data-site-page="core-page"] .whats-new__card--pink,
[data-theme="light"] body[data-site-page="core-page"] .about-feature:nth-child(6n+6) {
  --ci-hue: 236, 72, 153;
  --ci-ink: #9d174d;
}

/* The chips themselves. Selector is (0,3,1), which clears every rule listed
   above — the highest of those is (0,3,0) — so no !important is needed even
   though home.css, tools.css and pages.css all load after this file.
   Chips with no category ancestor (Why Choose, About, Contact, All Categories)
   fall through to the indigo default. */
[data-theme="light"] body[data-site-page="core-page"] .tool-card__icon,
[data-theme="light"] body[data-site-page="core-page"] .cat-card__icon,
[data-theme="light"] body[data-site-page="core-page"] .cat-tile__icon,
[data-theme="light"] body[data-site-page="core-page"] .featured-card__icon,
[data-theme="light"] body[data-site-page="core-page"] .whats-new__icon,
[data-theme="light"] body[data-site-page="core-page"] .mini-card__icon,
[data-theme="light"] body[data-site-page="core-page"] .other-cat-card__icon,
[data-theme="light"] body[data-site-page="core-page"] .all-cat-header__icon,
[data-theme="light"] body[data-site-page="core-page"] .content-block__icon,
[data-theme="light"] body[data-site-page="core-page"] .about-feature__icon,
[data-theme="light"] body[data-site-page="core-page"] .contact-info-card__icon,
[data-theme="light"] body[data-site-page="core-page"] .glass-card__icon {
  color: var(--ci-ink, #4338ca);
  background: linear-gradient(135deg,
              rgba(var(--ci-hue, 99, 102, 241), .16),
              rgba(var(--ci-hue, 99, 102, 241), .07));
  /* one shorthand: the base rules set an rgba(255,255,255,…) border and a wide
     coloured glow + inset white bevel, all of which have to go. Shadows carry
     the neutral in light mode; hue is carried by the fill, edge and glyph. */
  border: 1px solid rgba(var(--ci-hue, 99, 102, 241), .28);
  box-shadow: 0 4px 12px rgba(var(--ci-hue, 99, 102, 241), .14);
}