/* Wilhelm UI — design tokens, an TwentyCRM orientiert (1:1 dessen Theme-Werte).
   Quelle: twenty-ui/src/theme/constants (GrayScale, Border, Font, MainColors).
   Twenty rechnet in display-p3 → wir geben sRGB-Hex als Fallback und überschreiben
   in @supports mit den exakten p3-Werten. Custom Properties vererben sich durch
   jeden Shadow-Root → erreichen jedes <wl-*>. */
@import '/vendor/open-props.css'; /* lokal gevendort, kein unpkg-CDN mehr */

/* Inter lokal gehostet (kein Google-CDN → DSGVO-konform, kein Abmahnrisiko,
   garantiert überall dieselbe Schrift). Files in apps/ui/fonts/. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  /* Aktiver Modus als lesbares Signal für JS-Komponenten (wl-map, wl-codemirror),
     die ihre Farben in JS setzen. Folgt beiden Dark-Triggern unten. */
  --wl-scheme: light;

  /* ═══════════════ AXIOME — Corporate-Design-Stellschrauben ═══════════════
     Die wenigen Knöpfe. ALLES darunter (--wl-*) leitet sich hieraus ab.
     Corporate Design ändern = NUR hier drehen, nie in den Komponenten. */

  /* Marke */
  --ax-brand: #3e63dd;          /* Haupt-Akzent (Radix indigo9 / Twenty-Blau) */
  --ax-brand-2: #ff5fa2;        /* Zweit-Akzent / Marker-Pink */
  --ax-ink-on: #ffffff;         /* Text auf Marke/Ink */

  /* Radien — Buttons und Cards getrennt steuerbar */
  --ax-radius-button: 4px;
  --ax-radius-card: 8px;
  --ax-radius-pill: 999px;

  /* Gradients */
  --ax-gradient-main: linear-gradient(135deg, var(--ax-brand) 0%, #7c4dff 100%);
  --ax-gradient-chart: linear-gradient(var(--ax-brand) 0%, transparent 85%);

  /* Helligkeits-Sets (Light/Dark als Axiome — eine Quelle pro Modus) */
  --ax-light-bg: #fcfcfc;  --ax-light-surface: #ffffff;  --ax-light-surface-2: #f1f1f1;
  --ax-light-ink: #333333; --ax-light-ink-soft: #666666;
  --ax-light-border: #ebebeb; --ax-light-border-strong: #d6d6d6;
  --ax-dark-bg: #171717;  --ax-dark-surface: #1b1b1b;  --ax-dark-surface-2: #222222;
  --ax-dark-ink: #ebebeb; --ax-dark-ink-soft: #b3b3b3;
  --ax-dark-border: #222222; --ax-dark-border-strong: #484848;
  /* Viz im Dark-Mode — EINE Quelle, von beiden Dark-Triggern referenziert
     (OS-Präferenz + manueller [data-theme="dark"]-Schalter). */
  --ax-dark-viz-grid: #262626;       --ax-dark-viz-axis: #383838;
  --ax-dark-viz-axis-text: #b0b0b0;  --ax-dark-viz-label: #c8c8c8;  /* Labels lesbar */
  --ax-dark-viz-ink: #e2e2e2;        --ax-dark-viz-muted: #555555;
  --ax-dark-viz-dot: #202020;        /* Punkt-Raster — dunkel, fast bg-nah */
  --ax-dark-viz-hair: #4a4a4a;
  --ax-dark-viz-1: #e2e2e2; --ax-dark-viz-2: #aeaeae; --ax-dark-viz-3: #808080;
  --ax-dark-viz-4: #5c5c5c; --ax-dark-viz-5: #3e3e3e; --ax-dark-viz-6: #2c2c2c;
  /* Karten-Dark-Skin — sRGB-Hex (der Karten-Style-Validator frisst KEIN display-p3,
     darum flache Hex statt der p3-fähigen --wl-*-Tokens). wl-map liest sie zur
     Laufzeit; hier drehen = Karte ändert sich mit. */
  --ax-dark-map-bg: #16181c;          --ax-dark-map-water: #23272f;
  --ax-dark-map-road: #6b7280;        --ax-dark-map-road-casing: #0c0d10;
  --ax-dark-map-building: #2a2e36;    --ax-dark-map-text: #d7dade;
  --ax-dark-map-text-halo: #0c0d10;
  /* ════════════════════════════════════════════════════════════════════════ */

  /* roundings — semantisch, zeigen auf die Axiome */
  --wl-radius-sm: 2px;
  --wl-radius: var(--ax-radius-button); /* Buttons, Inputs */
  --wl-radius-lg: var(--ax-radius-card); /* Cards, Panels, Frames */
  --wl-radius-pill: var(--ax-radius-pill);
  --wl-radius-button: var(--ax-radius-button); /* explizite Corporate-Aliase */
  --wl-radius-card: var(--ax-radius-card);
  --wl-gradient-main: var(--ax-gradient-main); /* Hero/Banner */
  --wl-gradient-chart: var(--ax-gradient-chart); /* Area-Fill in Charts */

  /* type — Twenty Inter-Skala */
  --wl-font: 'Inter', system-ui, -apple-system, sans-serif;
  --wl-mono: var(--font-mono);
  /* GlyphUp: Serifen-Kursiv für Asides, Handschrift für Annotationen
     (keine Web-Fonts gebündelt → System-Cursive/Serif als Fallback). */
  --wl-font-serif: ui-serif, Georgia, 'Times New Roman', serif;
  --wl-font-hand: 'Caveat', 'Shantell Sans', 'Segoe Print', 'Bradley Hand', cursive;
  --wl-text-xs: 0.85rem; /* Twenty fontSize.xs */
  --wl-text-sm: 0.92rem; /* Twenty fontSize.sm */
  --wl-text-md: 1rem; /* Twenty fontSize.md */

  /* motion / shadow — flach, Tiefe kommt aus 1px-Borders */
  --wl-ease: var(--ease-3);
  --wl-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
  --wl-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.1);

  /* spacing (OpenProps primitives, Twenty fährt ein 4px-Grid) */
  --wl-1: var(--size-1);
  --wl-2: var(--size-2);
  --wl-3: var(--size-3);
  --wl-4: var(--size-5);

  /* Block-Spacing-Skala — EINE Quelle für Gaps/Padding/Block-Rhythmus, damit
     die Blocks nicht jeder ihr eigenes rem hardcoden. Werte = bisherige
     Ist-Werte, also reine Token-Indirektion (kein visueller Bruch). */
  --wl-gap-sm: 0.5rem;
  --wl-gap: 0.75rem;
  --wl-gap-md: 1rem;
  --wl-gap-lg: 1.5rem;
  --wl-pad-card: 1.25rem; /* einheitliches Card-Innenpadding */
  --wl-block-gap: 2rem; /* vertikaler Außenabstand zwischen gestapelten Blocks */

  /* Standardbreite — EINE Stellschraube für die Default-Breite von Objekt-/
     Karten-Komponenten (Player, Card, Embed, Figure …). Ohne constrainenden
     Parent setzen sie sich damit auf ein angenehmes Maß statt vollzublasen.
     Höher in der Hierarchie überschreibbar (--wl-default-width: …) oder pro
     Element via max-width/inline-style. */
  --wl-default-width: 350px;

  /* color — semantisch, leitet aus den Light-Axiomen + der Marke ab */
  --wl-bg: var(--ax-light-bg);
  --wl-surface: var(--ax-light-surface);
  --wl-surface-2: var(--ax-light-surface-2);
  --wl-ink: var(--ax-light-ink);
  --wl-ink-soft: var(--ax-light-ink-soft);
  --wl-ink-on: var(--ax-ink-on);
  --wl-border: var(--ax-light-border);
  --wl-border-strong: var(--ax-light-border-strong);
  --wl-ring: color-mix(in srgb, var(--ax-brand) 35%, transparent);

  --wl-accent: var(--ax-brand);
  --wl-accent-ink: var(--ax-ink-on);

  /* GlyphUp-Marker — pinker Textmarker wie im Caret-Editor (Highlight █…█) */
  --wl-marker: var(--ax-brand-2);

  /* ── Viz-Layer ───────────────────────────────────────────────────────
     Eigene, aufgehellte Grau-Rampe + Viz-Typo + Motion, damit Charts nicht
     "billig/dunkel" wirken. Jede <wl-*>-Viz erbt das über die Viz-Basis. */
  --viz-grid: #f0f0f0;        /* Gitterlinien — heller als --wl-border */
  --viz-axis: #e2e2e2;        /* Achsenlinien */
  --viz-axis-text: #8a8a8a;   /* Achsen-/Tick-Labels — ruhig, aber lesbar */
  --viz-label: #6b6b6b;       /* Daten-Labels */
  --viz-ink: #2b2b2b;         /* primäre Datenfarbe (Linie/Balken) */
  --viz-muted: #c4c4c4;       /* sekundäre/inaktive Serie */
  --viz-dot: #e6e6e6;         /* Punkt-Raster der viz-surface */
  --viz-dot-size: 1px;
  --viz-dot-gap: 14px;
  /* Serien-Rampe: 5 Graustufen zum UNTERSCHEIDEN mehrerer Serien. Der Akzent
     (--wl-accent) ist bewusst NICHT in der Rampe — der ist für Einzelserien +
     Details reserviert (sonst „bedeutet" Blau eine bestimmte Serie). */
  --viz-1: #2b2b2b;
  --viz-2: #565656;
  --viz-3: #808080;
  --viz-4: #a6a6a6;
  --viz-5: #cacaca;
  --viz-6: #dcdcdc;
  /* Viz-Typo-Skala — ≥12px, eigene Tokens (war hart 9–11px) */
  --viz-font-axis: 12px;
  --viz-font-label: 12px;
  --viz-font-value: 13px;
  /* Motion */
  --viz-dur: 420ms;
  --viz-ease: var(--ease-3, cubic-bezier(0.25, 0, 0.3, 1));
  /* Hairline-Textur — saubere dünne Linien, die monochrome Serien trennen */
  --viz-hair: #cfcfcf;
  --viz-hair-w: 1;
  /* Chart-Frame — Default-Seitenverhältnis der Solo-Karte (5:4 leicht quer);
     wide-Attribut macht 16:9 fürs Dashboard. */
  --viz-ratio: 5 / 4;
}

/* ── Dark-Mode ──────────────────────────────────────────────────────────────
   Greift per OS-Präferenz ODER explizitem [data-theme="dark"]. [data-theme="light"]
   erzwingt Hell und schlägt die OS-Präferenz (root-Defaults sind hell, darum
   reicht :not([data-theme="light"]) im Media-Query — kein Light-Override nötig).
   Werte liegen in --ax-dark-*, hier nur das Mapping (var-Referenzen → Werte
   bleiben single-source, nur die Zuweisungs-Liste steht in beiden Triggern). */
:root[data-theme="dark"] {
  --wl-scheme: dark;
  --wl-bg: var(--ax-dark-bg);
  --wl-surface: var(--ax-dark-surface);
  --wl-surface-2: var(--ax-dark-surface-2);
  --wl-ink: var(--ax-dark-ink);
  --wl-ink-soft: var(--ax-dark-ink-soft);
  --wl-ink-on: var(--ax-dark-bg); /* Text auf hellem Ink (Dark-Mode) */
  --wl-border: var(--ax-dark-border);
  --wl-border-strong: var(--ax-dark-border-strong);
  --wl-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
  --wl-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
  --viz-grid: var(--ax-dark-viz-grid);
  --viz-axis: var(--ax-dark-viz-axis);
  --viz-axis-text: var(--ax-dark-viz-axis-text);
  --viz-label: var(--ax-dark-viz-label);
  --viz-ink: var(--ax-dark-viz-ink);
  --viz-muted: var(--ax-dark-viz-muted);
  --viz-dot: var(--ax-dark-viz-dot);
  --viz-1: var(--ax-dark-viz-1);  --viz-2: var(--ax-dark-viz-2);
  --viz-3: var(--ax-dark-viz-3);  --viz-4: var(--ax-dark-viz-4);
  --viz-5: var(--ax-dark-viz-5);  --viz-6: var(--ax-dark-viz-6);
  --viz-hair: var(--ax-dark-viz-hair);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wl-scheme: dark;
    --wl-bg: var(--ax-dark-bg);
    --wl-surface: var(--ax-dark-surface);
    --wl-surface-2: var(--ax-dark-surface-2);
    --wl-ink: var(--ax-dark-ink);
    --wl-ink-soft: var(--ax-dark-ink-soft);
    --wl-ink-on: var(--ax-dark-bg);
    --wl-border: var(--ax-dark-border);
    --wl-border-strong: var(--ax-dark-border-strong);
    --wl-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
    --wl-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
    --viz-grid: var(--ax-dark-viz-grid);
    --viz-axis: var(--ax-dark-viz-axis);
    --viz-axis-text: var(--ax-dark-viz-axis-text);
    --viz-label: var(--ax-dark-viz-label);
    --viz-ink: var(--ax-dark-viz-ink);
    --viz-muted: var(--ax-dark-viz-muted);
    --viz-dot: var(--ax-dark-viz-dot);
    --viz-1: var(--ax-dark-viz-1);  --viz-2: var(--ax-dark-viz-2);
    --viz-3: var(--ax-dark-viz-3);  --viz-4: var(--ax-dark-viz-4);
    --viz-5: var(--ax-dark-viz-5);  --viz-6: var(--ax-dark-viz-6);
    --viz-hair: var(--ax-dark-viz-hair);
  }
}

/* wide-gamut: exakt Twentys display-p3 Werte */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --wl-bg: color(display-p3 0.988 0.988 0.988);
    --wl-surface: color(display-p3 1 1 1);
    --wl-surface-2: color(display-p3 0.945 0.945 0.945);
    --wl-ink: color(display-p3 0.2 0.2 0.2);
    --wl-ink-soft: color(display-p3 0.4 0.4 0.4);
    --wl-border: color(display-p3 0.922 0.922 0.922);
    --wl-border-strong: color(display-p3 0.839 0.839 0.839);
  }
  /* p3-Dark — gleiche zwei Trigger wie oben (manueller Schalter + OS). */
  :root[data-theme="dark"] {
    --wl-bg: color(display-p3 0.09 0.09 0.09);
    --wl-surface: color(display-p3 0.106 0.106 0.106);
    --wl-surface-2: color(display-p3 0.133 0.133 0.133);
    --wl-ink: color(display-p3 0.922 0.922 0.922);
    --wl-ink-soft: color(display-p3 0.702 0.702 0.702);
    --wl-border: color(display-p3 0.133 0.133 0.133);
    --wl-border-strong: color(display-p3 0.282 0.282 0.282);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --wl-bg: color(display-p3 0.09 0.09 0.09);
      --wl-surface: color(display-p3 0.106 0.106 0.106);
      --wl-surface-2: color(display-p3 0.133 0.133 0.133);
      --wl-ink: color(display-p3 0.922 0.922 0.922);
      --wl-ink-soft: color(display-p3 0.702 0.702 0.702);
      --wl-border: color(display-p3 0.133 0.133 0.133);
      --wl-border-strong: color(display-p3 0.282 0.282 0.282);
    }
  }
}

/* Block-Rhythmus — stapel Blocks in .wl-stack und sie kriegen EINEN
   einheitlichen vertikalen Außenabstand, statt dass jeder Block selbst Margins
   setzt (die Blocks sind bewusst außen margin-frei). Override pro Container via
   --wl-block-gap. Owl-Selector → kein Rand oben/unten am Stapel. */
.wl-stack > * + * { margin-top: var(--wl-block-gap); }