/* ============================================================
   intuiview · tokens.css
   Einzige Quelle der Wahrheit für alle Designwerte.
   Ebene 1 = Primitive (rohe Werte, nie direkt im Component-Code
   verwenden). Ebene 2 = Semantik (immer diese verwenden).
   ============================================================ */

:root {

  /* ---------- 1. PRIMITIVE · FARBE ---------- */

  /* Neutral, warm getönt */
  --n-000:#FFFFFF;
  --n-025:#FAF8F5;
  --n-035:#F7F6F2;
  --n-050:#F2EFEA;
  --n-100:#EFEBE4;
  --n-200:#E6E1D9;
  --n-300:#CFC8BD;
  --n-400:#A8AFAC;
  --n-500:#8A9491;
  /* #636E6C statt #6B7674 (7. Oktober 2026): 4,98:1 auf --bg-app, 4,60
     auf --bg-sunken, 4,74 auf --bg-selected. Vorher 4,43 / 4,10 / 4,21. */
  --n-600:#636E6C;
  --n-700:#4A5654;
  --n-800:#2A3634;
  --n-900:#16211F;

  /* Petrol */
  --p-050:#EDF4F3;
  --p-100:#D6E6E6;
  --p-200:#B0CDCF;
  --p-300:#7FB0B4;
  /* Nur auf dunklem Grund (--bg-inverse): dort traegt es den Akzent, den
     auf hellem Grund --p-700 traegt. 8,4:1 auf --p-900. */
  --p-250:#7FD0CA;
  --p-500:#1E6B75;
  --p-700:#14484F;
  --p-900:#0C2B2F;

  /* Ocker — ausschliesslich Diagramme */
  --o-050:#F9F3E7;
  --o-100:#F1E3C6;
  --o-300:#E3C68C;
  --o-500:#C08B3A;
  --o-700:#8F6624;

  /* Rot — ausschliesslich destruktiv */
  --e-050:#F7EAE3;
  --e-500:#B5502C;
  --e-700:#8E3D20;

  /* ---------- 2. SEMANTIK · FLÄCHE ---------- */
  --bg-app:var(--n-025);          /* Grundfläche aller Seiten */
  --bg-surface:var(--n-000);      /* Karten, Panels, Bubbles */
  --bg-sunken:var(--n-050);       /* Leerbalken, Eingabefeld-Innenflächen */
  --bg-hover:var(--n-025);        /* Hover auf Zeilen in weissen Panels */
  --bg-selected:var(--p-050);     /* ausgewählte Zeile, aktiver Filter */
  --bg-overlay:rgba(22,33,31,.32);/* Modal-Hintergrund */
  --bg-inverse:var(--p-900);      /* Tooltip, Toast, dunkle Rahmen der Landingpage */
  /* Grund der Landingpage. Eine Spur kuehler als --bg-app, damit weisse
     Karten und die Glasleiste darauf stehen. Nur intuiview.com. */
  --bg-site:var(--n-035);
  /* Hervorhebung auf --bg-site: gewaehlte Antwort, eigene Bubble, aktiver
     Anker. --bg-selected allein waere auf diesem Grund kaum zu sehen. */
  --bg-highlight:color-mix(in srgb,var(--p-050),var(--p-100));
  /* Das Telefon im Hero. Rahmen und Kamerainsel, nirgends sonst. */
  --bg-device:linear-gradient(145deg,var(--n-800),var(--n-900));
  --bg-device-island:var(--n-900);

  /* ---------- 3. SEMANTIK · LINIE ---------- */
  --border-soft:var(--n-100);     /* Trenner innerhalb von Panels */
  --border:var(--n-200);          /* Standardrahmen, Inputs */
  --border-strong:var(--n-300);   /* Hover auf Inputs */
  --border-input:var(--n-300);    /* Rahmen von Eingabefeldern: 1,66:1 statt 1,30:1 */
  --border-active:var(--p-200);   /* aktiv, ausgewählt */

  /* ---------- 4. SEMANTIK · SCHRIFT ---------- */
  --text:var(--n-900);            /* Titel, wichtige Werte */
  --text-body:var(--n-700);       /* Fliesstext */
  /* Meta-Text steht bei 12px und ist damit kein grosser Text, AA
     verlangt also die vollen 4,5:1 — auf jeder Fläche, auf der er steht.
     --n-600 schafft das seit dem 7. Oktober 2026 auf allen vier. */
  --text-muted:var(--n-600);      /* Meta, Labels, Zeitstempel */
  --text-faint:var(--n-400);      /* Platzhalter, deaktiviert — nie für Bedienbares */
  --text-accent:var(--p-700);     /* Zahl im Akzentkontext, Links */
  --text-on-accent:var(--n-000);
  --text-danger:var(--e-500);

  /* ---------- 5. SEMANTIK · AKTION ---------- */
  --action:var(--p-700);
  --action-hover:var(--p-900);
  --action-soft:var(--p-050);
  --action-soft-border:var(--p-100);
  --action-quiet:var(--p-300);    /* dekorative Icons */
  /* Nur für Tastaturfokus auf Knöpfen und Links (:focus-visible).
     Textfelder zeigen Fokus über --border-focus, nie über einen Ring. */
  --focus-ring:var(--p-300);
  --border-focus:var(--n-500);    /* Textfeld mit Cursor: Rahmen wird dunkler (3,1:1), nicht blau */
  /* Icons, die man anklicken kann (Stift, Schliessen, Stern aus, „…"):
     WCAG 1.4.11 verlangt 3:1, --text-faint hat nur 2,24:1. */
  --icon-action:var(--text-muted);
  --danger:var(--e-500);
  --danger-bg:var(--e-050);
  --danger-hover:var(--e-700);

  /* ---------- 5b. SEMANTIK · AUF DUNKLEM GRUND ----------
     Was auf --bg-inverse steht. Die dunklen Rahmen der Landingpage
     tauschen damit ihre Rollen aus, statt eigene Farben zu haben.  */
  --bg-inverse-raised:color-mix(in srgb,var(--p-900) 86%,var(--n-000));   /* Karte auf dunkel */
  --bg-inverse-selected:color-mix(in srgb,var(--p-900) 68%,var(--p-250)); /* hervorgehoben auf dunkel */
  --text-on-inverse:var(--p-050);
  --text-muted-on-inverse:var(--p-300);  /* 6,3:1 auf --p-900 */
  --border-on-inverse:rgba(255,255,255,.16);
  --action-on-inverse:var(--p-250);
  --text-on-action-inverse:var(--p-900);

  /* ---------- 6. SEMANTIK · DIAGRAMM ----------
     Reihenfolge ist verbindlich: c-1 zuerst, dann c-2, dann c-3.
     Nie mehr als drei Werte gleichzeitig einfärben.            */
  --chart-1:var(--p-500);         /* Primärwert */
  --chart-2:var(--p-300);         /* Sekundärwert, nachrangig */
  --chart-3:var(--o-500);         /* Gegenwert, Hervorhebung, kritisch */
  --chart-4:var(--o-300);         /* Gegenwert hell */
  --chart-5:var(--n-300);         /* Rest, "nicht genannt", neutral */
  --chart-track:var(--n-050);     /* leerer Balkenhintergrund */
  --chart-grid:var(--n-100);      /* Achsen, Grundlinie */
  /* Matrix-Heat: immer diese Basis mit variabler Deckkraft */
  --chart-heat-rgb:30,107,117;

  /* Stimmung */
  --sent-pos:var(--p-500);
  --sent-neu:var(--n-300);
  --sent-neg:var(--o-500);

  /* ---------- 7. TYPOGRAFIE ---------- */
  --font:"Instrument Sans","Instrument Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Ueberschriften ab --fs-title und die Wortmarke. Alles andere bleibt
     --font. Faellt Bricolage aus, steht dort Instrument Sans. */
  --font-display:"Bricolage Grotesque","Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;

  --fs-hero:clamp(2.5rem,9vw,5.25rem);     /* 40–84, nur Landingpage */
  --fs-hero-sm:clamp(2.5rem,11.6vw,3.2rem); /* 40–51, dieselbe Zeile unter 720px */
  --fs-section:clamp(1.9rem,5.5vw,3.25rem); /* 30–52, nur Landingpage */
  --fs-display:1.875rem;  /* 30 */
  --fs-lead:1.125rem;     /* 18 — Vorspann unter einer Hero-Zeile */
  --fs-title:1.1875rem;   /* 19 */
  --fs-chat:1.03125rem;   /* 16.5 — nur Teilnehmerseite */
  --fs-body:0.9375rem;    /* 15 */
  --fs-ui:0.84375rem;     /* 13.5 — Buttons, Zeilen, Filter */
  --fs-meta:0.75rem;      /* 12 */
  --fs-micro:0.6875rem;   /* 11 — Labels in Versalien */
  --fs-num-lg:1.375rem;   /* 22 */
  /* Nur Landingpage: eigener, groesserer Rhythmus. */
  --fs-site:1.0625rem;                        /* 17 — Fliesstext */
  --fs-site-sm:0.875rem;                      /* 14 — Kleingedrucktes, Etiketten */
  --fs-site-lg:1.25rem;                       /* 20 — Zwischenueberschrift */
  --fs-site-xl:1.5rem;                        /* 24 — Namen, Bestaetigung */
  --fs-site-lead:clamp(1.05rem,2.4vw,1.25rem);/* 17–20 — Vorspann */
  --fs-site-quote:clamp(1.4rem,3.6vw,2rem);   /* 22–32 — Satz, um den es geht */
  --fs-site-num:2.25rem;                      /* 36 — Schrittnummer */

  --lh-hero:1.05;         /* nur --fs-hero, sonst reisst der Zeilenfall auf */
  --lh-snug:1.4;          /* Bubbles auf der Landingpage */
  --lh-tight:1.15;
  --lh-heading:1.3;
  --lh-body:1.55;
  --lh-chat:1.6;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  --ls-display:-0.025em;
  --ls-title:-0.015em;
  --ls-normal:0;
  --ls-label:0.12em;

  /* ---------- 8. ABSTAND ----------
     4er-Raster. Keine Zwischenwerte erfinden.                  */
  --sp-0:0;
  --sp-1:2px;
  --sp-2:4px;
  --sp-3:6px;
  --sp-4:8px;
  --sp-5:12px;
  --sp-6:16px;
  --sp-7:20px;
  --sp-8:24px;
  --sp-9:32px;
  --sp-10:40px;
  --sp-11:56px;
  --sp-12:80px;
  /* Nur die Landingpage. Das Cockpit endet bei --sp-12. */
  --sp-13:120px;
  --sp-14:160px;

  /* ---------- 9. RADIEN ---------- */
  --r-xs:6px;    /* Checkbox, Matrixzelle, Legendenpunkt */
  --r-sm:10px;   /* Listenzeile, Kernaussage, Icon-Kachel */
  --r-md:16px;   /* Karte, Panel, Modal */
  --r-lg:22px;   /* Chat-Bubble, Telefonrahmen innen */
  --r-xl:26px;   /* Overlay, Rohverlauf-Sheet */
  --r-full:999px;/* Button, Chip, Input-Pille, Avatar */

  /* ---------- 10. TIEFE ----------
     Schatten nur für echte Schwebeelemente.                    */
  --sh-0:none;
  --sh-1:0 1px 2px rgba(20,40,40,.04);
  --sh-2:0 2px 4px rgba(20,40,40,.03), 0 10px 30px rgba(20,40,40,.05);
  --sh-3:0 8px 16px rgba(20,40,40,.06), 0 24px 60px rgba(20,40,40,.10);
  /* Nur Landingpage. Dort schwebt mehr: die Leiste, das Telefon, das Foto. */
  --sh-glass:0 14px 34px -14px rgba(15,36,39,.35),0 2px 6px rgba(15,36,39,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-glass-compact:0 10px 26px -14px rgba(15,36,39,.4),0 1px 3px rgba(15,36,39,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-device:0 50px 70px -35px rgba(15,36,39,.55),0 14px 28px -12px rgba(15,36,39,.35),inset 0 0 0 1.5px rgba(255,255,255,.12);
  --sh-photo:0 36px 50px -34px rgba(15,36,39,.4);
  --sh-photo-lift:0 50px 60px -34px rgba(15,36,39,.5);
  --sh-action-lift:0 14px 26px -12px rgba(20,72,75,.6);
  --sh-inverse-lift:0 24px 40px -26px rgba(0,0,0,.6);
  /* Die Glasleiste: halb durchsichtig, mit Unschaerfe dahinter. */
  --bg-glass:rgba(255,255,255,.72);
  --bg-glass-solid:rgba(255,255,255,.96);  /* ohne backdrop-filter */
  --border-glass:rgba(255,255,255,.75);

  /* ---------- 11. GRÖSSEN ---------- */
  --h-control-sm:30px;   /* Chip, Tag-Button */
  --h-control:36px;      /* Standardbutton, Input */
  --h-control-lg:44px;   /* Primäraktion, Analyseleiste */
  --h-control-xl:52px;   /* CTA Teilnehmerseite */
  --h-send:38px;         /* runder Senden- und Mikrofonknopf, eine Zeile im Chatfeld */
  --h-row:44px;          /* Gesprächszeile */
  --h-row-compact:32px;  /* Filterzeile */

  --icon-xs:13px;  /* Meta-Zeilen */
  --icon-sm:16px;  /* Buttons, Listenzeilen */
  --icon-md:21px;  /* Kacheln, Panel-Kopf gross */
  --icon-lg:24px;  /* Intro, leere Zustände */
  --icon-stroke:1.75;

  --avatar:31px;
  --tap-min:44px;        /* Mindest-Tapfläche mobil */

  /* ---------- 12. LAYOUT ---------- */
  --col-filter:248px;    /* linke Spalte Cockpit */
  --col-detail:420px;    /* rechte Spalte: Detail, Belege, Verlauf */
  --w-col-main:520px;    /* Mindestbreite der Mittelspalte, bevor das Detail überlagert */
  --w-tag:36ch;          /* längster Filter-Chip, danach Auslassung */
  --w-input-num:6.5rem;  /* Zahlenfeld in einer Zeile, z. B. Anzahl der Themen */
  --w-chat:390px;        /* max. Breite Teilnehmerspalte */
  --w-bubble:86%;        /* max. Breite einer Bubble */
  --w-prose:64ch;        /* max. Breite Fliesstext */
  /* 1200 und nicht 1080: im Hero stehen zwei Knoepfe nebeneinander und
     rechts daneben die Grafik. Bei 1080 bricht die Knopfreihe um. */
  --w-site:1120px;       /* max. Breite des Inhalts auf der Landingpage */
  --w-site-bar:1160px;   /* Kopfleiste der Landingpage, ausgefahren */
  --w-site-bar-compact:700px; /* … beim Runterscrollen */
  --h-site-bar:64px;
  --h-site-bar-sm:56px;  /* unter 720px */
  --h-site-foot:360px;   /* Fuss der Landingpage: mindestens, oder ein Drittel des Bildschirms */
  --w-site-faq:760px;    /* „Kurz gefragt“ */
  --w-site-team:880px;   /* Teamfoto */
  /* Telefon im Hero: fliessend, damit es auf dem Handy nicht die
     Ueberschrift verdraengt. Der Hof dahinter waechst mit. */
  --w-phone:clamp(244px,70vw,292px);
  --w-phone-sm:min(236px,64vw);
  --w-phone-halo:460px;
  --w-phone-ring:520px;
  --r-device:46px;       /* Telefonrahmen aussen */
  --r-screen:38px;       /* Telefonrahmen innen */
  --r-frame:clamp(24px,4vw,40px); /* dunkler Rahmen um ein Band */
  /* Die App-Schale: Kopf steht, Inhalt scrollt. dvh, weil vh auf dem
     Handy die Adressleiste mitzaehlt. Auf der Teilnehmerseite setzt
     Viewport.tsx --vv-h auf die sichtbare Hoehe ueber der Tastatur. */
  --h-app:100dvh;
  --h-shell:var(--vv-h,var(--h-app));
  --h-input-max:9.5rem;  /* Eingabefeld im Chat wächst bis hierhin, dann scrollt es */
  --w-app:1440px;
  --w-login:360px;       /* Anmeldung: eine schmale Spalte, kein Cockpit-Chrome */
  --w-subnav:200px;      /* Einstellungen: die Navigation der Bereiche links */
  --w-form:680px;        /* Einstellungen und Bericht: breiter wird der Inhalt nicht */
  --w-sum-key:140px;     /* Zusammenfassungsliste: Spalte mit dem Namen des Werts */
  --w-bar-inline:64px;   /* Balken in einer Rangzeile, gemeinsame Skala */
  --w-num-col:2.25rem;   /* Zahlenspalte rechts in einer Rangzeile */
  --w-menu:240px;        /* Menü unter dem Konto */
  --w-menu-wide:360px;   /* Auswahlmenü mit ganzen Sätzen, z. B. Leitfragen */
  --h-answer-max:50vh;   /* Analyse-Antwort über der Leiste, danach scrollt sie */
  --h-appbar:48px;       /* die Leiste ganz oben: Marke, Bereiche, Konto */

  --bp-sm:640px;
  --bp-md:800px;         /* ab hier zwei Spalten im Cockpit */
  --bp-lg:1180px;        /* ab hier Detailspalte permanent */

  /* ---------- 13. BEWEGUNG ---------- */
  --dur-fast:140ms;
  --dur:180ms;
  --dur-slow:260ms;
  --ease:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  /* Nur Landingpage. Dort darf es laenger dauern als in Regel 10: was
     hereinkommt, laeuft weich aus, statt kurz zu schalten. */
  --ease-glide:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.3,1.6,.5,1); /* federt nach, nur die Marke beim Ueberfahren */
  --dur-glide:450ms;
  --dur-reveal:800ms;
  --dur-enter:1100ms;

  /* ---------- 14. Z-EBENEN ---------- */
  --z-base:0;
  --z-sticky:10;
  --z-analysebar:20;
  --z-overlay:30;
  --z-modal:40;
  --z-toast:50;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; --dur-glide:0ms; --dur-reveal:0ms; --dur-enter:0ms; }
}