/* Design tokens — infinity look, nachgezogen nach ik-gui
   (libs/shared/ui/src/lib/style/theme/_theme-css-variables.scss, _variables.scss,
   _overrides.scss, _typography.scss).

   1. Basis-Variablen mit denselben Namen wie in ik-gui (--accent, --neutral-base,
      --text, --text-10, --table-hover, --focus, --success, …) je Theme.
   2. Ops-UI-Ergänzungen (Radien-Stufen, Elevation, Charts) am Ende, additiv.

   Ergänzung gegenüber ik-gui: --text-muted (Sekundärtext mit AA-Kontrast;
   ik-gui nutzt --text-alt nur für Disabled/Hinweise). */

/* ===== ik-gui base (light) ===== */
:root,
[data-theme="light"] {
  --accent: #5640d4;
  --accent-alt: #371ec5;
  --accent-text: #5640d4;
  --accent-contrast: #f5f6fc;
  --accent-bg: color-mix(in oklab, var(--accent) 8%, transparent);
  --hover-primary: color-mix(in oklab, var(--accent) 10%, transparent);
  --hover-accent: color-mix(in oklch, var(--accent) 90%, var(--text) 10%);
  --table-hover: color-mix(in oklab, var(--neutral-alt) 85%, var(--accent) 15%);
  --navigation-item-border: var(--text-5);

  --neutral-base: #f5f6fc;
  --neutral-alt: #ffffff;
  --divider: #d1d5db;
  --neutral-border: #d1d5db;
  --scroll-bar: #d1d5db;

  --text: #353a54;
  --text-alt: #b8bdd6;
  --text-muted: #5d6382;
  --text-negative: #f5f6fc;
  --text-10: color-mix(in oklab, var(--text) 10%, transparent);
  --text-5: color-mix(in oklab, var(--text) 5%, transparent);

  --error: #d62e00;
  --error-alt: #b82e09;
  --error-bg: #fff3ef;
  --error-bg-hover: #ffe2db;
  --error-btn-text: #f5f6fc;
  --warning: #a85f00;
  --warning-alt: #834a00;
  --warning-bg: #f8eee2;
  --warning-bg-hover: #ffeeda;
  --warning-btn-text: #f5f6fc;
  --success: #088224;
  --success-alt: #005914;
  --success-bg: #e0ffe8;
  --success-bg-hover: #c9fdd7;
  --info: #0a5bff;
  --info-alt: #0048d9;
  --info-bg: #e0eaff;
  --info-bg-hover: #c2d6ff;
  --info-btn-text: #f5f6fc;
  /* infinity hub — eigener Farbton für Rollen/Kategorien, kein Status */
  --hub: #af00af;
  --hub-bg: #fbe3fb;

  --focus: #ff00a8;

  --box-shadow-vertical: 0 5px 10px 0 var(--text-10), 0 2px 5px 0 var(--text-5);
  --box-shadow-drawer: -5px 0 10px 0 var(--text-10), -2px 0 5px 0 var(--text-5);
  --overlay-backdrop: rgb(20 20 20 / .28);

  color-scheme: light;
}

/* ===== Dark (ik-gui .theme-dark, Flächen neutral) =====
   Akzent-, Status- und Hub-Farben wie ik-gui .theme-dark; abweichend davon
   neutrale Graphit-Flächen statt Blau-Violett (#282b3d / #353a54) und dazu
   passende, weniger violett getönte Status-Hintergründe. Kontraste gegen
   --neutral-alt: Text/Muted >= 4.5:1, --text-alt / --viz-accent >= 3:1. */
[data-theme="dark"] {
  --accent: #7965f0;
  --accent-alt: #5a43dd;
  --accent-text: #b2a5ff;
  --accent-contrast: #f5f6fc;
  --accent-bg: color-mix(in oklab, var(--accent) 25%, transparent);
  --hover-primary: color-mix(in oklab, var(--accent) 18%, transparent);
  --table-hover: color-mix(in oklab, color-mix(in oklab, var(--neutral-alt) 80%, var(--accent) 20%) 87%, var(--text) 13%);
  --navigation-item-border: var(--text-10);

  --neutral-base: #131516;
  --neutral-alt: #1c1f20;
  --divider: #2a2e30;
  --neutral-border: var(--text-10);
  --scroll-bar: #3a3f42;

  --text: #eceff0;
  --text-alt: #737b7e;
  --text-muted: #a9b1b4;
  --text-negative: #131516;
  --text-5: color-mix(in oklab, var(--text) 12%, transparent);

  --error: #ffa985;
  --error-alt: #f78759;
  --error-bg: #3a2421;
  --error-bg-hover: #4a1c16;
  --error-btn-text: #6e0500;
  --warning: #f1cb5a;
  --warning-alt: #cf9b00;
  --warning-bg: #352f1d;
  --warning-bg-hover: #3d2f12;
  --warning-btn-text: #6e2a00;
  --success: #00bd78;
  --success-alt: #00a468;
  --success-bg: #1b3a2e;
  --success-bg-hover: #183328;
  --info: #b0caff;
  --info-alt: #82a4e9;
  --info-bg: #1e2a40;
  --info-bg-hover: #182848;
  --info-btn-text: #1745a2;
  --hub: #f08ff0;
  --hub-bg: #442a4c;

  --box-shadow-vertical: 0 5px 10px 0 rgb(0 0 0 / .25), 0 2px 5px 0 rgb(0 0 0 / .18);
  --box-shadow-drawer: -5px 0 10px 0 rgb(0 0 0 / .25), -2px 0 5px 0 rgb(0 0 0 / .18);
  --overlay-backdrop: rgb(0 0 0 / .5);

  color-scheme: dark;
}

/* ===== derived (both themes) ===== */
:root {
  --error-10: color-mix(in oklab, var(--error-alt) 10%, transparent);
  --warning-10: color-mix(in oklab, var(--warning-alt) 10%, transparent);
  --success-10: color-mix(in oklab, var(--success) 10%, transparent);
  --info-10: color-mix(in oklab, var(--info) 10%, transparent);
  --hub-10: color-mix(in oklab, var(--hub) 14%, transparent);
  --accent-10: color-mix(in oklab, var(--accent) 14%, transparent);
}

/* ===== shape / spacing / sizes (ik-gui _variables.scss, _overrides.scss) ===== */
:root {
  --radius: 5px;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --navigation-width: 19.75rem;
  --navigation-item-size: 2.5rem;
  --icon-size: 1.125rem;
}

/* ===== typography (ik-gui _typography.scss) ===== */
:root {
  --font-text: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-headline: 'Inter Tight', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
}

/* ===== Ops-UI-Ergänzungen (additiv; prequal.html / datenschutz.html nutzen
   sie nicht). Radien-Stufen über dem ik-gui-Controlradius, getönte Elevation,
   gedämpfter Feldrahmen, Chart-Akzent (Dark-Stufe validiert gegen
   --neutral-alt: Kontrast >= 3:1) und Zweitfarbe für Marken-Verläufe
   (--brand-2: Drawer-Kante, Login-Hintergrund). ===== */
:root {
  --radius-md: 8px;
  --radius-lg: 12px;
  --elev-1: 0 1px 2px 0 var(--text-5), 0 1px 3px 0 var(--text-5);
  --elev-2: 0 6px 16px -4px var(--text-10), 0 2px 4px -1px var(--text-5);
  --elev-3: 0 18px 44px -10px color-mix(in oklab, var(--text) 26%, transparent), 0 4px 12px -4px var(--text-10);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --field-border: color-mix(in oklab, var(--text) 30%, transparent);
  --surface-sunken: color-mix(in oklab, var(--neutral-base) 65%, var(--neutral-alt));
  --viz-accent: #5640d4;
  --brand-2: #a340b6;
  --viz-track: color-mix(in oklab, var(--accent) 12%, transparent);
}
[data-theme="dark"] {
  --elev-1: 0 1px 2px 0 rgb(0 0 0 / .25);
  --elev-2: 0 8px 20px -6px rgb(0 0 0 / .4), 0 2px 4px -1px rgb(0 0 0 / .2);
  --elev-3: 0 22px 52px -10px rgb(0 0 0 / .6), 0 6px 16px -6px rgb(0 0 0 / .35);
  --field-border: color-mix(in oklab, var(--text) 26%, transparent);
  --surface-sunken: color-mix(in oklab, var(--neutral-base) 55%, var(--neutral-alt));
  --viz-accent: #8d7bf6;
  --viz-track: color-mix(in oklab, var(--accent) 24%, transparent);
}

/* ===== ehex-Logo: Varianten je Theme (alle Seiten) =====
   Schwarze Schrift im hellen, weiße im dunklen Design. Markup:
   <img class="logo-light" src="/ds/brand/ehex-logo-black.svg" alt="eHealth Experts">
   <img class="logo-dark" src="/ds/brand/ehex-logo-white.svg" alt="" aria-hidden="true"> */
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }