@layer settings {
  :root{
    --navy:#0B1424; --navy-2:#1A2E4F; --ink:#EAF0F7; --muted:#93A3BD; --line:#1A2E4F;
    --signal:#5AD08C; --bloodhawk:#C9A24B; --cernavis:#2BB36B;
    /* Bone-Band-Skin (benannte Tokens statt ad-hoc-Hex; AA-Kontraste ≥4.5:1) */
    --bone:#F1EDE3; --bone-box:#E5DECD; --bone-line:#e3ddcf;
    --accent:var(--ink);   /* Dachmarke monochrom; per body[data-product] ueberschrieben */
    --radius-sm:10px;
    /* Fonts (self-hosted, s. fonts.css) */
    --font:'Hanken Grotesk',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
    --font-logo:'Space Grotesk',var(--font);
    --font-hawk:'Oswald',var(--font);
    /* Erweiterte Kern-Palette (base.css) */
    --navy-3:#0e1c33; --panel:#0a1322; --text-dim:#CDD8EA; --faint:#5E6F86;
    --gold:var(--bloodhawk); --green:var(--cernavis);   /* Alias: E5-Port referenziert --gold/--green */
    /* Layout / Motion */
    --wrap:1180px; --radius:12px;                        /* --radius-sm bleibt 1a-Wert 10px */
    --ease:cubic-bezier(.22,.61,.36,1); --dur:.42s;
    /* E5-Skin-Flaechen */
    --edge:#15263d; --edge-2:#223a5c; --pane:#0c1626; --bar:#0a1322; --box:#1a2b47; --term:#9fb0c8;
    --fig-accent:var(--muted); --fig-strong:var(--ink); --fig-weak:#33486b; --fig-grid:#1d3354;
    /* Tokenisierte Ad-hoc-Hex (CI-1/CI-5) */
    --body-radial:#0f2038; --footer-bg:#141519; --bn-node:#5b7099;
    --wm-color-dark:#cdd8e6; --wm-color-light:#3a4658;  /* Watermark je Band */
    --wm-color:var(--wm-color-dark);
  }
  body[data-product="bloodhawk"]{ --accent:var(--bloodhawk); }
  body[data-product="cernavis"]{ --accent:var(--cernavis); }
  body[data-band="light"]{ --wm-color:var(--wm-color-light); }
  .sec--light{
    --ink:#16202E; --text-dim:#33414f; --muted:#5b6a78; --faint:#8a93a0; --term:#5b6a78;
    --pane:#FBF9F3; --bar:#EFEBE0; --panel:#EFEBE0;
    --edge:#e3ddcf; --edge-2:#d6ccb8; --box:#E5DECD;
    --fig-grid:#cdc3af; --fig-weak:#d3c9b4; --fig-strong:#16202E; --fig-accent:var(--accent);
    --accent:#16202E; --signal:#12603a;   /* AA auf Bone (a11y A3) */
  }
  body[data-product="bloodhawk"] .sec--light{ --accent:#6a5015; }
  body[data-product="cernavis"]  .sec--light{ --accent:#155a3a; }

  /* .detail-modal--on-light — dieselben Token-Werte wie .sec--light, aber
     OHNE dessen visuelle Regeln (Hintergrund/Border-Block/Textur-Overlay,
     main.css). Das gemeinsame <dialog id="detail-modal"> liegt einmalig
     ausserhalb aller Sektionen (BaseLayout.astro) und wuerde ohne diese
     Klasse immer die Dark-Default-Tokens aufloesen, auch wenn der Klick
     aus einer .sec--light-Sektion kam ("falsche Hintergrundfarbe",
     Design-Fund 06.07.). enhance.ts toggelt die Klasse anhand von
     origin.closest('.sec--light'). Bewusst dupliziert statt .sec--light
     direkt auf den Dialog zu setzen: dessen eigene Hintergrund/Border/
     ::after-Regeln wuerden sonst ungewollt mitgreifen. */
  .detail-modal--on-light {
    --ink:#16202E; --text-dim:#33414f; --muted:#5b6a78; --faint:#8a93a0; --term:#5b6a78;
    --pane:#FBF9F3; --bar:#EFEBE0; --panel:#EFEBE0;
    --edge:#e3ddcf; --edge-2:#d6ccb8; --box:#E5DECD;
    --fig-grid:#cdc3af; --fig-weak:#d3c9b4; --fig-strong:#16202E; --fig-accent:var(--accent);
    --accent:#16202E; --signal:#12603a;
  }
  body[data-product="bloodhawk"] .detail-modal--on-light{ --accent:#6a5015; }
  body[data-product="cernavis"]  .detail-modal--on-light{ --accent:#155a3a; }
}