/* Lernplattform — Design-Tokens (Samas Panel Style, Quelle der Werte:
   /opt/SAMAS Media Group Dashboard/docs/design-system/STYLE-GUIDE.md und apps/web/src/app/globals.css).
   EINZIGE Stelle mit Farbwerten: panel.html, login.html und die Praesentationsseite lesen nur Variablen.
   Hell = Standard, Dunkel = Klasse .dark auf <html> (wie im Dashboard). */
@font-face{font-family:"Inter";src:url("inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* Tinte & Text */
  --ink:#151581; --ink-2:#5f5f96; --ink-3:#a1a1cd; --text:#292824; --ash:#949392;
  /* Flaechen */
  --canvas:#f6f6fa; --card:#fff; --bone:#f6f5f4; --fog:#d6d6d6; --hair:#e4e4ee;
  /* Aktion & Akzente */
  --pink:#ff83da; --pink-top:#ff95e0; --pink-soft:#ffc5ee; --pink-wash:#f7e1f7; --ice:#d2f4ff; --lilac:#9f73e6;
  --green:#00a56a; --green-soft:#d8f5e8; --rose:#d93f5a; --rose-soft:#fde4e9; --amber-soft:#fdf0c9; --amber:#c98a00;
  /* Text auf farbigen Flaechen */
  --on-ink:#fff;          /* Schrift auf Indigo-Flaeche (Toast, aktiver Chip) */
  --on-pink:#151581;      /* Schrift auf der Pink-Aktion: immer Indigo, nie Weiss (2:1) */
  --on-status:#fff;       /* Schrift auf Ampel-Punkt, Rose-, Gruen-Flaeche */
  --ok-fg:#075c3d; --bad-fg:#8a1d33; --warn-fg:#6b4500; --disabled-fg:#6b6b73; --placeholder:#8a8a99;
  /* Ampel: Flaeche / Schrift / Punkt — alle Paare >= 4.5:1, Symbol zusaetzlich (✓ ! ✗) */
  --amp-ok-bg:#e7f5ec;  --amp-ok-fg:#14532d;  --amp-ok-dot:#15803d;
  --amp-warn-bg:#fff5d6;--amp-warn-fg:#5c3d00;--amp-warn-dot:#a16207;
  --amp-bad-bg:#fde8eb; --amp-bad-fg:#8a1424; --amp-bad-dot:#b91c1c;
  /* Linien, Scrims, Ringe */
  --line-bad:rgba(217,63,90,.45); --ring-ok:rgba(0,165,106,.35); --ring-ok-2:rgba(0,165,106,.45);
  --scrim:rgba(21,21,129,.28); --zebra:rgba(255,255,255,.55);
  --scroll:#d9d9ea; --scroll-hover:#c3c3dc;
  --logo-bg:#151581; --logo-fg:#ff83da; --logo-glow:rgba(21,21,129,.25);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23151581' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  /* Tiefe */
  --sh-1:0 1px 2px rgba(37,36,41,.08),0 3px 8px rgba(36,36,41,.05);
  --sh-2:0 1px 2px rgba(37,36,41,.09),0 6px 16px rgba(36,36,41,.07),0 18px 40px rgba(36,36,41,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-3:0 2px 4px rgba(37,36,41,.08),0 12px 28px rgba(36,36,41,.10),0 34px 70px rgba(36,36,41,.10),inset 0 1px 0 rgba(255,255,255,.95);
  --sh-in:inset 0 2px 5px rgba(36,36,41,.09),inset 0 0 0 1px rgba(36,36,41,.04);
  --sh-cta:0 1px 0 rgba(255,255,255,.55) inset,0 -3px 0 rgba(21,21,129,.14) inset,0 10px 24px rgba(255,131,218,.50),0 2px 4px rgba(21,21,129,.18);
  --sh-cta-hover:0 1px 0 rgba(255,255,255,.55) inset,0 -3px 0 rgba(21,21,129,.14) inset,0 16px 32px rgba(255,131,218,.55),0 3px 6px rgba(21,21,129,.18);
  --sh-cta-active:0 1px 0 rgba(255,255,255,.4) inset,0 -1px 0 rgba(21,21,129,.14) inset,0 3px 8px rgba(255,131,218,.4);
  --sh-voice:0 1px 0 rgba(255,255,255,.6) inset,0 6px 14px rgba(159,115,230,.35),0 2px 4px rgba(21,21,129,.12);
  --sh-toast:0 12px 36px rgba(21,21,129,.35);
  --lift:inset 0 1px 0 rgba(255,255,255,.85);
  /* Form */
  --r-tag:12px; --r-card:24px; --r-tile:20px; --r-field:14px; --r-sec:36px;
  --voice:linear-gradient(270deg,rgba(102,127,255,.85) 19.6%,rgba(206,162,255,.85) 50%,rgba(255,133,177,.85) 86%);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Aliase fuer Inline-Styles im JS von panel.html */
  --muted:var(--ink-2); --danger:var(--rose); --warn:#8a5a00; --ok:var(--green);
  color-scheme:light;
}
/* Dunkel = Indigo-Nacht wie im Dashboard (.dark in globals.css) */
:root.dark{
  --ink:#c9c9f5; --ink-2:#a0a0d0; --ink-3:#6f6fa6; --text:#e9e9f1; --ash:#8e8eaa;
  --canvas:#0c0c1d; --card:#151528; --bone:#1b1b3a; --fog:#33334f; --hair:#26264a;
  --pink-wash:#3a2646; --ice:#16384a; --lilac:#b393f0;
  --green:#22c38a; --green-soft:#103a2c; --rose:#e8667d; --rose-soft:#3d1a25; --amber-soft:#3a2e10; --amber:#e0a526;
  --on-ink:#12123a; --on-status:#fff;
  --ok-fg:#a7f3d0; --bad-fg:#fecdd3; --warn-fg:#fde68a; --disabled-fg:#9a9ab8; --placeholder:#8f8fb5;
  --amp-ok-bg:#103a2c;  --amp-ok-fg:#a7f3d0;  --amp-ok-dot:#15803d;
  --amp-warn-bg:#3a2e10;--amp-warn-fg:#fde68a;--amp-warn-dot:#a16207;
  --amp-bad-bg:#3d1a25; --amp-bad-fg:#fecdd3; --amp-bad-dot:#b91c1c;
  --line-bad:rgba(232,102,125,.55); --ring-ok:rgba(34,195,138,.4); --ring-ok-2:rgba(34,195,138,.5);
  --scrim:rgba(0,0,0,.55); --zebra:rgba(255,255,255,.025);
  --scroll:#2e2e52; --scroll-hover:#3d3d68;
  --logo-bg:#2a2a8f; --logo-glow:rgba(0,0,0,.4);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c9c9f5' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.25);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  --sh-3:0 2px 4px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  --sh-in:inset 0 2px 5px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.04);
  --sh-toast:0 12px 36px rgba(0,0,0,.5);
  --lift:inset 0 1px 0 rgba(255,255,255,.06);
  --warn:#f5c26b;
  color-scheme:dark;
}