/*
 * Kuono Webapp · Designsystem „07 Grundriss"
 *
 * Diese Datei wird als erste Stylesheet-Datei geladen und ist die einzige
 * erlaubte Quelle für Farbe, Grösse, Radius, Schatten und Bewegung. Wer einen
 * Wert braucht, der hier nicht steht, ergänzt ihn hier und dokumentiert ihn —
 * er erfindet ihn nicht an der Verwendungsstelle.
 *
 * Grundhaltung: keine Karten, keine Füllflächen, keine Schatten im Seitenfluss.
 * Ordnung entsteht aus Haarlinien, Spaltenkanten und Luft; Gewicht kommt aus
 * dem Schriftschnitt, nicht aus Farbe. Farbe erscheint nur, wo sie eine
 * Bedeutung trägt.
 *
 * Kein dunkles Design: Die Anwendung erscheint ausschliesslich hell. Deshalb
 * gibt es hier nur einen Satz Werte, und die Farbrollen sind fest.
 *
 * Drei harte Verbote:
 *   1. --ku-neutral-dot darf niemals Textfarbe sein (Kontrast 2.8:1).
 *   2. Beträge sind Text in --ku-text, nie farbig. Farbe nur, wenn ein Zustand
 *      sie erzwingt (überfällig).
 *   3. Schnitt 200 nur ab 30 px Schriftgrösse, darunter mindestens 300.
 */
:root {
  /* Flächen */
  --ku-bg:            #FFFFFF;   /* Grundfläche aller Views */
  --ku-bg-subtle:     #FAFAF9;   /* abgesetzte Zone, Zebra, Summenblock */
  --ku-bg-desk:       #F2F2F0;   /* Aussenraum, Editor-Arbeitsfläche */
  --ku-bg-invert:     #22252A;   /* Umkehrfläche, Coachmark, Kurzmeldung */
  /* Text */
  --ku-text:          #22252A;   /* primär, 16.1:1 */
  --ku-text-body:     #3E4247;   /* Fliesstext, 10.4:1 */
  --ku-text-muted:    #5C6167;   /* Labelwerte, 7.4:1 */
  --ku-text-subtle:   #6E7379;   /* sekundär, 4.8:1 — KLEINSTE Textfarbe */
  --ku-text-disabled: #A9A7A2;   /* nur auf deaktivierten Bedienelementen */
  /* Linien */
  --ku-edge:          #22252A;   /* Abschnittskante, 1px */
  --ku-border:        #C9C7C3;   /* Rahmen Bedienelement */
  --ku-border-strong: #A9A7A2;   /* Rahmen Bedienelement im Hover */
  --ku-line:          #E6E4E0;   /* Zeilenlinie */
  --ku-line-soft:     #EDECE9;   /* Zeilenlinie in dichten Tabellen, Schiene */
  /* Interaktion */
  --ku-accent:        #3C4650;   /* Akzent, Daten, Fokus, Diagrammbalken */
  --ku-accent-soft:   #D5D3CE;   /* zweiter Diagrammbalken, deaktiviert */
  --ku-action:        #22252A;   /* Primäraktion Ruhe */
  --ku-action-hover:  #34383E;
  --ku-action-active: #14161A;
  --ku-hover-soft:    #F4F4F2;   /* Hover auf sekundär und Menüzeile */
  --ku-selected:      #F4F6F8;   /* gewählte Tabellenzeile, aktives Objekt */
  /* Semantik — NIE für Beträge, nur für Zustände */
  --ku-ok:            #3F6B52;   /* 4.8:1 */
  --ku-ok-bg:         #F6FAF7;
  --ku-ok-border:     #CFE0D6;
  --ku-warn:          #9A6B00;   /* 4.6:1 */
  --ku-warn-text:     #7A5500;   /* Warnungstext auf Weiss */
  --ku-warn-bg:       #FAF7F0;
  --ku-warn-border:   #E7DDC6;
  --ku-bad:           #972E28;   /* 6.9:1 */
  --ku-bad-hover:     #7F251F;
  --ku-bad-active:    #6B1E19;
  --ku-bad-bg:        #FBF6F5;
  --ku-bad-border:    #E7D3D1;
  --ku-neutral-dot:   #9A9E9F;   /* NUR Punkt- und Rahmenfarbe, NIE Text */
  /* Marke — NUR Schweizerkreuz und Herkunftsmerkmal, nie ein Zustand */
  --ku-swiss:         #D52B1E;   /* offizielles Rot der Schweizer Fahne */
  /* Altersstufen offener Posten */
  --ku-age-0:         #3C4650;   /* nicht fällig */
  --ku-age-30:        #9A6B00;   /* 1–30 Tage */
  --ku-age-60:        #B4562F;   /* 31–60 Tage */
  --ku-age-90:        #972E28;   /* 61–90 Tage */
  --ku-age-90plus:    #6B1E19;   /* über 90 Tage */
  /* Typografie */
  /*
   * «Sora Variable» ist der Name, unter dem @fontsource-variable/sora die
   * Schrift anmeldet -- nicht «Sora». Solange hier nur «Sora» stand, fand der
   * Browser keine Familie dieses Namens und fiel auf system-ui zurück: Die
   * ganze Anwendung lief auf Segoe UI statt auf der Schrift des Entwurfs,
   * obwohl die Datei geladen war. Der zweite Name fängt eine statisch
   * installierte Sora ab, system-ui bleibt als letzte Reserve.
   */
  --ku-font: 'Sora Variable', 'Sora', system-ui, -apple-system, sans-serif;
  --ku-fs-page:   40px; --ku-lh-page:   44px; --ku-fw-page:   200; --ku-ls-page:   -0.035em;
  --ku-fs-metric: 30px; --ku-lh-metric: 32px; --ku-fw-metric: 200; --ku-ls-metric: -0.035em;
  --ku-fs-area:   26px; --ku-lh-area:   32px; --ku-fw-area:   300; --ku-ls-area:   -0.025em;
  --ku-fs-sect:   22px; --ku-lh-sect:   28px; --ku-fw-sect:   400; --ku-ls-sect:   -0.02em;
  --ku-fs-row:    17px; --ku-lh-row:    24px; --ku-fw-row:    500;
  --ku-fs-amount: 19px; --ku-lh-amount: 24px; --ku-fw-amount: 300; --ku-ls-amount: -0.02em;
  --ku-fs-cell:   16px; --ku-lh-cell:   22px; --ku-fw-cell:   300;  /* Tabellenzahl */
  --ku-fs-body:   14px; --ku-lh-body:   22px; --ku-fw-body:   300;
  --ku-fs-ui:     14px; --ku-lh-ui:     20px; --ku-fw-ui:     400;  /* Bedienelement */
  --ku-fs-label:  12px; --ku-lh-label:  16px; --ku-fw-label:  400; --ku-ls-label: 0.14em;
  --ku-fs-meta:   12px; --ku-lh-meta:   18px; --ku-fw-meta:   300;
  /* Abstände */
  --ku-sp-1:  4px;  --ku-sp-2: 10px; --ku-sp-3: 14px; --ku-sp-4: 24px;
  --ku-sp-5: 44px;  --ku-sp-6: 56px; --ku-sp-7: 64px;

  /* Breite der Suchleiste ueber jeder Tabelle. Eine Zahl fuer die ganze App. */
  --ku-suche-w: 520px;
  /* Raster */
  --ku-page-w:      1440px;
  --ku-page-pad:    56px;
  --ku-read-w:      78ch;
  --ku-col-context: 320px;   /* Kontextspalte im Detail */
  --ku-col-areas:   236px;   /* Bereichsliste Einstellungen, Aufbau-Spalte */
  --ku-rail-w:       44px;   /* eingeklappte Spur */
  --ku-two-col:     1.25fr 1fr;
  --ku-gap-col:      56px;
  /* Höhen */
  --ku-h-header:  72px; --ku-h-crumb: 46px;
  --ku-h-field:   44px; --ku-h-field-m: 48px;
  --ku-h-btn-lg:  46px; --ku-h-btn: 40px; --ku-h-btn-sm: 34px;
  --ku-h-btn-lg-m: 52px;         /* Primaeraktion mobil, volle Breite */
  --ku-h-row:     52px; --ku-h-thead: 40px; --ku-h-row-m: 64px;
  --ku-h-tabbar:  60px;
  /* Radien und Rahmen */
  --ku-r-0: 0;     /* Flächen, Bänder, Tabellen */
  --ku-r-1: 2px;   /* Buttons, Felder, Chips */
  --ku-r-full: 999px; /* Statuspunkte, Avatar */
  --ku-bw: 1px; --ku-bw-focus: 1.5px; --ku-bw-status: 3px;
  --ku-table-row-min: 50px;
  --ku-table-cell-y: 15px;
  --ku-table-cell-x: 14px;
  /* Schatten — NUR Overlay */
  --ku-shadow-dialog: 0 1px 3px rgba(34,37,42,.10), 0 12px 32px rgba(34,37,42,.14);
  --ku-shadow-panel:  -8px 0 32px rgba(34,37,42,.10);
  --ku-shadow-menu:   0 6px 20px rgba(34,37,42,.12);
  --ku-shadow-toast:  0 6px 20px rgba(34,37,42,.20);
  /* Motion */
  --ku-t-color:  120ms ease-out;
  --ku-t-expand: 180ms cubic-bezier(.2,.7,.3,1);
  --ku-t-dialog: 200ms ease-out;
  --ku-t-panel:  240ms ease-out;
  --ku-t-toast:  160ms ease-out;
  --ku-t-skeleton: 1400ms ease-in-out;
  /* Fokus, überall gleich */
  --ku-focus: var(--ku-bw-focus) solid var(--ku-accent);
  --ku-focus-offset: 2px;

  /*
   * Ergänzungen zu Abschnitt 02.
   *
   * Die Vorgabe verlangt, fehlende Werte hier zu ergänzen und zu begründen
   * statt sie an der Verwendungsstelle zu erfinden. Diese beiden Werte kommen
   * aus den Entwürfen, standen dort aber nur als Hex-Wert im Markup.
   */
  /* Rahmen des Chips «Versendet». Aus designsystem.dc.html, Abschnitt 12 —
     eine aufgehellte Fassung von --ku-accent, die als Rahmen trägt, ohne wie
     eine Statusfarbe zu wirken. */
  --ku-accent-border: #CFD6DD;
  /* Verdunkelung hinter Dialog und Seitenpanel. Halbdurchsichtig, deshalb
     nicht als Flächentoken ausdrückbar. */
  --ku-scrim: rgba(34, 37, 42, .34);
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

a:focus-visible, button:focus-visible, [role='button']:focus-visible,
[tabindex]:focus-visible, select:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  border-radius: 0;
  outline: var(--ku-focus);
  outline-offset: var(--ku-focus-offset);
}

body {
  font-family: var(--ku-font);
  font-feature-settings: 'tnum' 1;
  background: var(--ku-bg);
  color: var(--ku-text);
}