/* GENERERET af packages/design-tokens/build.mjs fra tokens.json — RET IKKE HER. */
/* Ret tokens.json og kør `npm run tokens` i apps/web. CI fejler, hvis filen er ude af trit. */
/*
 * ⛔ Interaktionslaget (Founder 17. okt. 2026 00:50, R-2914) — ÉN kilde for app.cindrus.com, cindrus.com og lead-sitene.
 * build.mjs kopierer filen til apps/web/src/app/interaktion.css og apps/sites/public/cindrus/interaktion.css (`npm run tokens`; --check i CI).
 * Farver KUN fra brand-tokens (var(--color-…) fra tokens.json — appen får dem fra tokens.css, sitene fra cindrus-tokens.css).
 *
 *   · megamenu-pilen peger ned lukket og drejer 180° op åben (180 ms), styret af aria-expanded på knappen
 *   · knapper og links: tydelig hover-farve, identisk :focus-visible, :active (let tryk) og disabled
 *   · prefers-reduced-motion: ingen animation, kun tilstandsskift
 *
 * Hover-farven gælder sitene (body[data-interaktion="sites"]), hvor farverne står i style-attributter — derfor !important. Appens
 * komponenter har deres egen hover (Tailwind); fokus, tryk, disabled og reduceret bevægelse gælder begge steder.
 * Vagten: apps/sites/tests/browser/interaktion.spec.ts (med mutant).
 */

/* ── Pilen ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.c-pil { display: inline-block; transition: transform 180ms ease; }
[aria-expanded="true"] > .c-pil { transform: rotate(180deg); }

/* ── Fokus: ens overalt ──────────────────────────────────────────────────────────────────────────────────────────────── */
:where(a, button, [role="button"], summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-blue) !important;
  outline-offset: 2px !important;
}

/* ── Tryk og deaktiveret ─────────────────────────────────────────────────────────────────────────────────────────────── */
:where(a, button, [role="button"], summary) {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 80ms ease;
}
:where(button, [role="button"]):not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); }
:where(button, [role="button"], a)[aria-disabled="true"],
:where(button):disabled {
  color: var(--color-inactive) !important;
  cursor: not-allowed;
  transform: none;
}

/* ── Reduceret bevægelse: tilstanden skifter, intet glider ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .c-pil, :where(a, button, [role="button"], summary) { transition: none !important; }
  :where(button, [role="button"]):active { transform: none !important; }
}

/* ══ KUN SITENE (build.mjs skærer herfra i appens kopi: selektorerne genkender sitenes inline-farver, og appen har ingen hex — hex-vagt.mjs) ══ */
/* ── Hover på sitene ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* link-deep: et trin mørkere end sitets linkfarve (#0046CC = blue-deep) — så skifter også et link, der allerede er blåt (målt 17. okt.:
   «Read our story →» og markedsknapperne skiftede ikke med blue-deep). Samme værdi som sitenes egen a:hover. */
body[data-interaktion="sites"] :where(a, button):not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--color-link-deep) !important;
}
/* Den blå knap: fladen bliver mørkere, teksten forbliver hvid. */
body[data-interaktion="sites"] :is(a, button)[style*="background: #0057FF"]:not(:disabled):hover {
  background: var(--color-blue-deep) !important;
  color: var(--color-on-navy) !important;
}
/* På navy (sidefoden og mørke flader): hvid tekst med understregning — blå på navy kan ikke læses. */
body[data-interaktion="sites"] :is(footer, [style*="background: #0B1F3A"]) :where(a, button):not([style*="background: #0057FF"]):hover {
  color: var(--color-on-navy) !important;
  text-decoration: underline !important;
}