/* ============================================================================
   ROOTS BY BENDA — Stellar theme layer  (museum-theme.css)
   K136 "stellar-ai" rebrand (was K128 museum/parchment). Loaded AFTER shared.css
   on every non-homepage page. Remaps the existing design tokens (which the whole
   Tailwind site reads from) to the cool/clinical Stellar palette —
   #f7f8fb bg / white surfaces / #111827 ink / indigo #4f46e5 + Inter — so the
   entire tool-page + function-renderer surface goes cool without redesigning each
   page by hand.

   Mechanism: pages default to data-theme="light" (flipped from dark); this layer
   refines that light theme to the exact Stellar palette and accent. The all-states
   selector (:root, :root[data-theme=light], :root[data-theme=dark]) is PRESERVED so
   the site reads as one brand regardless of the saved toggle value.
   Self-hosted Inter (no font CDN; copies the museum.css/system.css @font-face pattern).
   Brand mark = GOLD hexagon #b6892e — STAYS GOLD (never recolored).
   Spec: .k134-brand/DESIGN_PIVOT_PLAN.md
   ========================================================================== */

@font-face{
  font-family:'Inter';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/css/fonts/inter-latin.woff2') format('woff2');
}

/* ---- Palette tokens: force the Stellar cool set under every theme state,
        so the site reads as one brand regardless of the saved toggle value.
        The all-states selector below is PRESERVED — only the VALUES are repointed
        from museum parchment to Stellar cool. --- */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --dark-bg-rgb:247 248 251;     /* Stellar page #f7f8fb */
  --dark-card-rgb:255 255 255;   /* white surface #ffffff */
  --dark-border-rgb:216 222 234; /* cool hairline #d8deea */
  --text-primary-rgb:17 24 39;   /* ink #111827 */
  --text-secondary-rgb:92 100 114;/* cool grey #5c6472 */
  --text-muted-rgb:124 132 148;  /* lighter cool grey #7c8494 */

  --brand-green:#4f46e5;         /* INDIGO — brand MARK / logo wordmark (K140: was gold #b6892e, Benda flipped to indigo) */
  --brand-green-light:#6366f1;
  --brand-primary:#4f46e5;       /* Stellar indigo — UI accent / data / source-link bars */
  --brand-primary-strong:#4338ca;/* pressed/hover indigo */
  --brand-pass:#4f46e5;          /* K133 NO-GREEN hard rule — pass/safe = indigo, not moss-green */
  --brand-warn:#92400e;          /* SOLID amber for must-label / thresholds (7.09:1 on #fff) */
}

body{
  background-color:var(--dark-bg)!important;
  color:var(--text-primary)!important;
  letter-spacing:-0.005em;
}

/* ---- Typography: Inter for display + body (Stellar uses one type voice, no serif),
        JetBrains Mono unchanged for data/mono. --------------------------------- */
.font-display{ font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif!important; }
h1,h2,h3,.t-display,.t-h1,.t-h2,.t-h3{ font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif!important; letter-spacing:-0.02em; }

/* gradient-text was a green clip; make it solid indigo accent (sans handled above). */
.gradient-text{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--brand-primary)!important;
}

/* ---- Accent literals that bypassed tokens (greens/golds baked in shared.css).
        Skip-link + UI glow/hover repointed gold -> Stellar indigo. --------- */
.skip-link{ background:var(--brand-primary); color:#ffffff; }
.skip-link:focus{ outline-color:var(--brand-primary-strong); }
.glow{ box-shadow:0 0 60px rgba(79,70,229,0.14)!important; }
.tool-card:hover{ box-shadow:0 10px 40px rgba(79,70,229,0.16)!important; }

/* ---- Stellar edge: soften back toward the rounded data-card feel (radius
        12-14px), away from the museum's sharp archival 4px corners. ---------- */
.rounded-2xl{ border-radius:14px!important; }
.rounded-xl{ border-radius:12px!important; }
.rounded-full{ border-radius:9999px; } /* keep pills round (badges) */

/* data-value accent (NOAEL/MoS chips) already reads --brand-primary -> indigo. */

/* ---- K133 NO-GREEN hard rule (Stellar repoint): neutralize legacy compiled
        Tailwind green/emerald status utilities (text-green-*, bg-green-*,
        border-green-*, emerald-*) that bypass token remap and render literal SaaS
        green. The function renderers STILL emit these literally for MoS>=100 /
        "Not banned" / safe states (e.g. ingredients/[[slug]].js:2771-2777,2817),
        so this neutralizer is LOAD-BEARING — repointed to COOL (neutral ink text +
        indigo wash/border), NOT crimson, NOT deleted. Applies on every page that
        loads museum-theme.css. ----------------------------------------------- */
[class*="text-green-"],[class*="text-emerald-"]{ color:rgb(var(--text-primary-rgb))!important; }
[class*="bg-green-"],[class*="bg-emerald-"]{ background-color:rgba(79,70,229,0.10)!important; }
[class*="border-green-"],[class*="border-emerald-"]{ border-color:rgba(79,70,229,0.38)!important; }

/* ---- K140 Stellar contrast fix: the green neutralizer above (K133) covered ONLY
        green/emerald. The function renderers ALSO emit literal red / amber / blue /
        etc. status utilities for RISK signals — the MoS-FAIL verdict chip,
        SVHC/CMR/endocrine/ban flags, GHS "Danger", sensitization. On the forced-light
        Stellar bg those pastel -200/300/400 shades render ~1.1-2.1:1 (unreadable) for
        any visitor on a page with no data-theme=light (= all function pages) whose OS
        is dark — shared.css only fixes them under [data-theme=light]/prefers light.
        Repoint UNCONDITIONALLY (mirrors the green rule's scope) so a safety FAIL is
        NEVER less legible than a PASS. Red stays readable-danger, amber=warn, cool
        pastels -> ink, dark color-tint chip backgrounds -> light wash. ------------- */
[class*="text-red-"],[class*="text-rose-"]{ color:#991b1b!important; }            /* danger red ~6.5:1 on #f7f8fb */
[class*="text-orange-"],[class*="text-amber-"],[class*="text-yellow-"]{ color:#92400e!important; } /* warn amber ~7:1 */
[class*="text-blue-2"],[class*="text-blue-3"],[class*="text-blue-4"],[class*="text-sky-3"],[class*="text-sky-4"],[class*="text-cyan-3"],[class*="text-cyan-4"],[class*="text-teal-3"],[class*="text-teal-4"],[class*="text-indigo-2"],[class*="text-indigo-3"],[class*="text-indigo-4"],[class*="text-violet-3"],[class*="text-violet-4"],[class*="text-purple-3"],[class*="text-purple-4"],[class*="text-pink-3"],[class*="text-pink-4"]{ color:rgb(var(--text-primary-rgb))!important; }
[class*="bg-red-9"],[class*="bg-red-5"],[class*="bg-rose-9"]{ background-color:rgba(153,27,27,0.07)!important; }
[class*="bg-orange-9"],[class*="bg-orange-5"],[class*="bg-amber-9"],[class*="bg-amber-5"],[class*="bg-yellow-9"],[class*="bg-yellow-5"]{ background-color:rgba(146,64,14,0.07)!important; }
[class*="bg-blue-9"],[class*="bg-cyan-9"],[class*="bg-teal-9"],[class*="bg-indigo-9"],[class*="bg-violet-9"],[class*="bg-purple-9"],[class*="bg-pink-9"]{ background-color:rgba(79,70,229,0.07)!important; }
[class*="border-red-"],[class*="border-rose-"]{ border-color:rgba(153,27,27,0.34)!important; }
/* harden the legacy named brand-green token — this is the GOLD logo wordmark
   ("Roots"), NOT a status color. Stays GOLD via --brand-green. */
.text-brand-green{ color:var(--brand-green)!important; }

/* shared.css ships literal-green semantic status classes that survive into the
   light theme via its own !important rules. Neutralize to COOL (neutral ink on an
   indigo wash). The html[data-theme] prefix (0,2,1) beats shared.css's
   [data-theme="light"] (0,2,0). */
html[data-theme] .status-permitted,
html[data-theme] .status-active,
html[data-theme] .badge-excellent,
html[data-theme] .pass,
html[data-theme] .flag-ok,
html[data-theme] .pathway-cbec,
html[data-theme] .category-general,
html[data-theme] .iecic-badge{
  color:rgb(var(--text-primary-rgb))!important;
  border-color:rgba(79,70,229,0.38)!important;
  background-color:rgba(79,70,229,0.10)!important;
}

/* ---- K140 tool-card icons: the emoji->SVG swap left tiny 20px gray icons inside
        emoji-sized text-4xl/6xl wrappers, so they rendered small, washed-out, lost.
        Turn each into a proper indigo icon tile (soft indigo square + crisp indigo
        mark). Scoped to .tool-card (tools page + any in-page tool grid). */
.tool-card > .text-4xl,
.tool-card > .text-6xl,
.tool-card > .text-3xl{
  display:inline-flex!important; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background:rgba(79,70,229,0.10); margin-bottom:18px;
  font-size:0!important; line-height:0;
}
.tool-card .rb-icon{ width:26px!important; height:26px!important; color:#4f46e5!important; }
/* market cards use a 2-letter country code instead of an icon — make it a crisp indigo badge */
.tool-card > .text-4xl .t-kicker,
.tool-card > .text-4xl > span,
.tool-card > .text-3xl > span{ font-size:15px!important; line-height:1; font-weight:700; letter-spacing:0.06em; color:#4f46e5!important; }