/* AGORA OS Design-Tokens – EINZIGE Quelle für Farbe, Abstand, Radius, Schrift, Schatten, Bewegung.
   S6 Richtung Grok: fast schwarz bzw. weiß, neutrales Grau ohne Farbstich, Eingaben als Pillen, Akzent nur für
   Links und Fokus (kühles Blau), Ampelfarben getrennt. Hell und dunkel gleich sorgfältig. */
:root {
  /* Farben hell */
  --a-grund: #ffffff;
  --a-flaeche: #f7f7f8;
  --a-flaeche-2: #efeff1;
  --a-flaeche-3: #e4e4e7;
  --a-linie: #e2e2e6;
  --a-text: #0d0d0f;
  --a-text-leise: #6b6b73;
  --a-text-auf-akzent: #ffffff;
  --a-akzent: #1d6fd1;
  --a-akzent-weich: #e3eefb;
  --a-gut: #23804a;
  --a-warn: #a8661a;
  --a-fehler: #c4352b;
  --a-fehler-weich: #fbe7e5;
  --a-warn-weich: #fbf0dc;     /* os-56: gelbe Marke „berichtigt“ (hell) */
  --a-gut-weich: #e0f2e6;
  --a-schleier: rgba(13, 13, 15, 0.4);

  /* Schrift */
  --a-schrift: "Segoe UI Variable Text", "Segoe UI", -apple-system, "SF Pro Text", "Helvetica Neue", Roboto, sans-serif;
  --a-schrift-anzeige: "Segoe UI Variable Display", "Segoe UI", -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  --a-schrift-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --a-groesse-1: 12px;
  --a-groesse-2: 13px;
  --a-groesse-3: 15px;
  --a-groesse-4: 17px;
  --a-groesse-5: 22px;
  --a-groesse-6: 30px;
  --a-groesse-7: 40px;
  --a-zeile: 1.5;
  --a-gewicht-normal: 400;
  --a-gewicht-mittel: 500;
  --a-gewicht-fett: 600;

  /* Abstände */
  --a-abstand-1: 4px;
  --a-abstand-2: 8px;
  --a-abstand-3: 12px;
  --a-abstand-4: 16px;
  --a-abstand-5: 24px;
  --a-abstand-6: 32px;
  --a-abstand-7: 48px;
  --a-abstand-8: 72px;

  /* Maße */
  --a-leiste-breite: 272px;
  --a-leiste-breite-ipad: 232px; /* os-78: iPad hochkant – schmalere Leiste, mehr Platz für den Chat */
  --a-schublade-breite: 320px; /* Handy: Schublade höchstens so breit (sonst 85 % der Breite) */
  --a-titel-hoehe: 36px;
  /* os-102 Desktop-App (Entwurf D): Breite Editor rechts, Zusatzbreite der linken Spalte, Höhe der Chat-Liste über dem Explorer, Griffbreite */
  /* Owner 29.10.: links und Chat schmaler, der Code rechts bekommt den Rest; Spalten frei ziehbar ab diesen Mindestbreiten */
  --a-d-links: 240px;
  --a-d-chat: 460px;
  --a-d-links-min: 160px;
  --a-d-chat-min: 280px;
  --a-d-code-min: 320px;
  --a-chats-hoehe: 216px;
  --a-griff: 4px;
  --a-inhalt-breite: 760px;
  --a-chat-breite: 768px; /* Dialoge, Karten */
  --a-chat-spalte: 1080px; /* Owner 29.10.: Chat-Spalte breiter, Tabellen/Code/Diffs/Werkzeugzeilen/Rückfragen nutzen diese volle Breite */
  --a-kopf-hoehe: 56px;
  --a-karte-breite: 400px;
  --a-feld-hoehe: 44px;
  --a-knopf-klein: 28px;       /* os-53: kleiner runder Knopf im Feld (Diktat in jedem Eingabefeld) */
  --a-linie-dicke: 1px;
  --a-fokus-dicke: 2px;
  --a-feld-min: 200px;
  --a-eintrag-min: 180px;
  --a-code-min: 140px;
  /* P6 Leinwand: Bildschirm-Größen je Gerät */
  --a-geraet-desktop-b: 1280px;
  --a-geraet-desktop-h: 800px;
  --a-geraet-tablet-b: 768px;
  --a-geraet-tablet-h: 1024px;
  --a-geraet-handy-b: 390px;
  --a-geraet-handy-h: 844px;

  /* Radien */
  --a-radius-s: 6px;
  --a-radius-m: 10px;
  --a-radius-l: 20px;
  --a-radius-xl: 28px;
  --a-radius-rund: 999px;

  /* Schatten */
  --a-schatten-1: 0 1px 2px rgba(15, 18, 21, 0.06), 0 1px 1px rgba(15, 18, 21, 0.04);
  --a-schatten-2: 0 12px 32px rgba(15, 18, 21, 0.12), 0 2px 6px rgba(15, 18, 21, 0.06);

  /* Bewegung */
  --a-dauer-kurz: 120ms;
  --a-dauer-mittel: 220ms;
  --a-kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root:not([data-theme="hell"]) {
  /* Dunkel ist die Vorgabe (Owner 27.10.): ohne Wahl und bei altem „System“ immer dunkel, nie nach dem Gerät */
  --a-grund: #0c0c0d;
  --a-flaeche: #151517;
  --a-flaeche-2: #1f1f22;
  --a-flaeche-3: #2b2b2f;
  --a-linie: #2a2a2e;
  --a-text: #f4f4f5;
  --a-text-leise: #9d9da5;
  --a-text-auf-akzent: #0c0c0d;
  --a-akzent: #7ab8ff;
  --a-akzent-weich: #16243a;
  --a-gut: #6cc58f;
  --a-warn: #e0a75a;
  --a-fehler: #f0857c;
  --a-fehler-weich: #3a1d1b;
  --a-warn-weich: #3a2c14;     /* os-56: gelbe Marke „berichtigt“ (dunkel) */
  --a-gut-weich: #16301f;
  --a-schleier: rgba(0, 0, 0, 0.62);
  --a-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --a-schatten-2: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

:root[data-theme="hell"] {
  color-scheme: light;
}
/* Owner 29.10.: Desktop-App bei 1280 schmaler (links 220, Chat 420) */
@media (max-width: 1360px) { :root { --a-d-links: 220px; --a-d-chat: 420px; } }