/* ════════════════════════════════════════════════════
   Dynamic Visual — dv-layer theme (K8)
   Loaded after the dv-layer bundle and before site.css.
   Activation: <html data-theme="dynamic-visual"> (data.php, K9). The mode is
   not in data.php: theme-init.js sets data-mode on <html> before the first
   paint, from the stored choice or else from the OS. The
   `:not([data-mode])` block below is the no-JS fallback only.
   Custom properties and @font-face only; rules belong in site.css.
   ════════════════════════════════════════════════════ */

/* ── Inter (lokal) ───────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

@layer dv-themes {
  [data-theme='dynamic-visual'] {
    --dv-font-family-sans:
      'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;

    /* Warme Neutralpalette */
    --dv-color-bg-default: #f8f7f5;
    --dv-color-bg-raised: #ffffff;
    --dv-color-bg-overlay: #ffffff;
    --dv-color-bg-muted: #f2f1ef;
    --dv-color-bg-subtle: #f2f1ef;
    --dv-color-bg-input: #ffffff;
    --dv-color-bg-inverse: #1a1a1a;
    --dv-color-bg-neutral: #f2f1ef;
    --dv-color-bg-neutral-hover: #eae8e5;
    --dv-color-bg-neutral-active: #e0deda;

    --dv-color-fg-default: #1a1a1a;
    --dv-color-fg-muted: #4a4a4a;
    --dv-color-fg-subtle: #5c5c5c;
    --dv-color-fg-disabled: #a8a5a1;
    --dv-color-fg-inverse: #ffffff;

    --dv-color-border-default: #dedede;
    /* muted bewusst = default: dv-layer rahmt viele Komponenten (Card inkl.
       Header/Footer-Trenner, Accordion, Tabelle, Code-Block, dl-bordered …) mit
       --dv-color-border-muted; dessen dv-layer-Default (~oklch 96 %) ist auf
       unserem warmen bg praktisch unsichtbar. Auf den sichtbaren Default-Wert
       anheben, damit alle gerahmten Komponenten eine erkennbare Kante haben
       (ersetzt die früheren Einzel-Overrides für Card + Accordion). „Subtile"
       Trenner (dv-separator--subtle, dl-Zeilen) werden dadurch eine Spur
       sichtbarer — auf dem warmen bg gewollt. Dark-Werte in beiden Dark-Blöcken
       spiegeln. */
    --dv-color-border-muted: #dedede;
    --dv-color-border-emphasis: #c9c6c2;
    --dv-color-border-strong: #4a4a4a;

    /* Magenta-Pink-Akzent — die Markenfarbe (vgl. ../../../brand/brand-visual.md, Logo-Gradient).
       Hot-Pink #e91e63 nie als Text auf Hell (nur 4.35:1) — daher Deep-Violet für
       fg/Links, ein leicht vertiefter Magenta für Solid-Flächen, AA-geprüft. */
    --dv-color-bg-accent: #8e1f9e;
    --dv-color-bg-accent-hover: #7a1a8a;
    --dv-color-bg-accent-active: #661572;
    --dv-color-bg-accent-subtle: #f0d4eb;
    --dv-color-fg-accent: #8b1a80;
    --dv-color-fg-accent-hover: #661572;
    --dv-color-fg-on-accent: #ffffff;
    --dv-color-fg-on-accent-subtle: #8b1a80;
    --dv-color-border-accent: #9c27b0;
  }

  /* Dark palette — the brand's warm-dark token set, in two cases:
       1. [data-mode='dark']: theme-init.js (stored choice or OS) or the toggle
       2. OS dark without data-mode: no-JS fallback only, which also mirrors
        dv-layer's own OS dark tokens (a root data-theme switches those off)
     dv-layer reads the same data-mode, so its base tokens flip in lockstep.
     Keep the site values in the two blocks identical when editing. */
  [data-theme='dynamic-visual'][data-mode='dark'] {
    --dv-color-bg-default: #121110;
    --dv-color-bg-raised: #1c1a18;
    --dv-color-bg-overlay: #1c1a18;
    --dv-color-bg-muted: #221f1d;
    --dv-color-bg-subtle: #221f1d;
    --dv-color-bg-input: #1c1a18;
    --dv-color-bg-inverse: #edecea;
    --dv-color-bg-neutral: #242220;
    --dv-color-bg-neutral-hover: #2e2c2a;
    --dv-color-bg-neutral-active: #383532;

    --dv-color-fg-default: #edecea;
    --dv-color-fg-muted: #b8b5b0;
    --dv-color-fg-subtle: #8a8784;
    --dv-color-fg-disabled: #5c5955;
    --dv-color-fg-inverse: #121110;

    --dv-color-border-default: #2e2c2a;
    --dv-color-border-muted: #2e2c2a;
    --dv-color-border-emphasis: #44413e;
    --dv-color-border-strong: #b8b5b0;

    --dv-color-bg-accent: #a82a9e;
    --dv-color-bg-accent-hover: #8e1f9e;
    --dv-color-bg-accent-active: #7a1a8a;
    --dv-color-bg-accent-subtle: #2a1828;
    --dv-color-fg-accent: #e673c4;
    --dv-color-fg-accent-hover: #ef93d4;
    --dv-color-fg-on-accent-subtle: #e673c4;
    --dv-color-border-accent: #c44fb8;
  }

  @media (prefers-color-scheme: dark) {
    [data-theme='dynamic-visual']:not([data-mode]) {
      --dv-color-bg-default: #121110;
      --dv-color-bg-raised: #1c1a18;
      --dv-color-bg-overlay: #1c1a18;
      --dv-color-bg-muted: #221f1d;
      --dv-color-bg-subtle: #221f1d;
      --dv-color-bg-input: #1c1a18;
      --dv-color-bg-inverse: #edecea;
      --dv-color-bg-neutral: #242220;
      --dv-color-bg-neutral-hover: #2e2c2a;
      --dv-color-bg-neutral-active: #383532;

      --dv-color-fg-default: #edecea;
      --dv-color-fg-muted: #b8b5b0;
      --dv-color-fg-subtle: #8a8784;
      --dv-color-fg-disabled: #5c5955;
      --dv-color-fg-inverse: #121110;

      --dv-color-border-default: #2e2c2a;
      --dv-color-border-muted: #2e2c2a;
      --dv-color-border-emphasis: #44413e;
      --dv-color-border-strong: #b8b5b0;

      --dv-color-bg-accent: #a82a9e;
      --dv-color-bg-accent-hover: #8e1f9e;
      --dv-color-bg-accent-active: #7a1a8a;
      --dv-color-bg-accent-subtle: #2a1828;
      --dv-color-fg-accent: #e673c4;
      --dv-color-fg-accent-hover: #ef93d4;
      --dv-color-fg-on-accent-subtle: #e673c4;
      --dv-color-border-accent: #c44fb8;

      /* Mirror of dv-layer 0.30.0's OS dark fallback (dv-layer skips it once <html> has data-theme). Re-diff on every dv-layer upgrade.
         Its three prefers-color-scheme:dark blocks (the second nested in
         prefers-contrast:more, the third in prefers-contrast:less), minus the
         tokens this block already sets. */
      --dv-color-bg-subtle-active: var(--dv-color-gray-700);
      --dv-color-bg-overlay-hover: var(--dv-color-gray-700);
      --dv-color-bg-backdrop: oklch(0% 0 0/0.6);
      --dv-color-bg-input-disabled: var(--dv-color-gray-800);
      --dv-color-bg-success-subtle: var(--dv-color-green-950);
      --dv-color-bg-error: var(--dv-color-red-500);
      --dv-color-bg-error-hover: var(--dv-color-red-600);
      --dv-color-bg-error-active: var(--dv-color-red-700);
      --dv-color-bg-error-subtle: var(--dv-color-red-950);
      --dv-color-bg-warning-strong: var(--dv-color-amber-400);
      --dv-color-bg-warning-subtle: var(--dv-color-amber-950);
      --dv-color-bg-info: var(--dv-color-blue-500);
      --dv-color-bg-info-subtle: var(--dv-color-blue-950);
      --dv-color-fg-on-accent: var(--dv-color-white);
      --dv-color-fg-on-success-subtle: var(--dv-color-green-300);
      --dv-color-fg-on-error-subtle: var(--dv-color-red-300);
      --dv-color-fg-on-warning-subtle: var(--dv-color-amber-300);
      --dv-color-fg-on-info-subtle: var(--dv-color-blue-300);
      --dv-color-fg-error-hover: var(--dv-color-red-300);
      --dv-color-fg-success: var(--dv-color-green-400);
      --dv-color-fg-error: var(--dv-color-red-400);
      --dv-color-fg-warning: var(--dv-color-amber-400);
      --dv-color-fg-info: var(--dv-color-blue-400);
      --dv-color-border-success: var(--dv-color-green-400);
      --dv-color-border-error: var(--dv-color-red-400);
      --dv-color-border-warning: var(--dv-color-amber-400);
      --dv-color-border-info: var(--dv-color-blue-400);
      --dv-color-chart-1: oklch(72% 0.15 264);
      --dv-color-chart-2: oklch(78% 0.14 145);
      --dv-color-chart-3: oklch(78% 0.14 55);
      --dv-color-chart-4: oklch(72% 0.15 350);
      --dv-color-chart-5: oklch(76% 0.11 220);
      --dv-color-chart-6: oklch(80% 0.12 95);
      --dv-color-chart-7: oklch(70% 0.16 300);
      --dv-color-chart-8: oklch(74% 0.12 185);
      --dv-color-bg-overlay-translucent: oklch(15% 0 0/0.88);
      --dv-shadow-xs: 0px 1px 2px 0px oklch(0% 0 0/0.2);
      --dv-shadow-sm: 0px 1px 3px 0px oklch(0% 0 0/0.3), 0px 1px 2px -1px oklch(0% 0 0/0.3);
      --dv-shadow-md: 0px 4px 6px -1px oklch(0% 0 0/0.35), 0px 2px 4px -2px oklch(0% 0 0/0.35);
      --dv-shadow-lg: 0px 10px 15px -3px oklch(0% 0 0/0.4), 0px 4px 6px -4px oklch(0% 0 0/0.4);
      --dv-shadow-xl: 0px 20px 25px -5px oklch(0% 0 0/0.45), 0px 8px 10px -6px oklch(0% 0 0/0.45);
      --dv-shadow-2xl: 0px 25px 50px -12px oklch(0% 0 0/0.5);
      --dv-shadow-inner: inset 0px 2px 4px 0px oklch(0% 0 0/0.2);
    }
    @media (prefers-contrast: more) {
      [data-theme='dynamic-visual']:not([data-mode]) {
        --dv-color-fg-error: var(--dv-color-red-300);
        --dv-color-fg-success: var(--dv-color-green-300);
        --dv-color-fg-warning: var(--dv-color-amber-300);
        --dv-color-fg-info: var(--dv-color-blue-300);
      }
    }
  }

  /* ── App-inverse: the dark highlight surface (site.css paints it) ──
     Its contents read the translucent fg-inverse scheme, in both modes because
     every value is relative to fg-inverse: text and dl definitions full,
     muted/subtle text and dl terms 72 %, dl frame and rows 15 %, outline
     buttons (the Bausteine links) with a 40 % edge and a 12 %/20 %
     hover/active fill. Scoped to the children so the surface keeps its own
     page-coloured edge. */
  .app-inverse > * {
    --dv-color-fg-default: var(--dv-color-fg-inverse);
    --dv-color-fg-muted: color-mix(in oklch, var(--dv-color-fg-inverse) 72%, transparent);
    --dv-color-fg-subtle: color-mix(in oklch, var(--dv-color-fg-inverse) 72%, transparent);
    --dv-color-border-default: color-mix(in oklch, var(--dv-color-fg-inverse) 15%, transparent);
    --dv-color-border-strong: color-mix(in oklch, var(--dv-color-fg-inverse) 40%, transparent);
    --dv-color-bg-muted: color-mix(in oklch, var(--dv-color-fg-inverse) 12%, transparent);
    --dv-color-bg-subtle: color-mix(in oklch, var(--dv-color-fg-inverse) 20%, transparent);
  }
}