/* ============================================================================
   FIELD & FOLIO — App/Product tokens
   Neutral, technical, dense. For the INTERNAL workbench of apps/web ONLY.

   AUSDRÜCKLICH NICHT für: Website, Endbericht/Objektakte, Mandatsunterlagen,
   Kurzpitch und alle kundenseitigen Seiten (Login, HV-Formular, Freigabe,
   Signatur, Börse). Diese Flächen sind fertig und bleiben unverändert auf den
   Paper-&-Ink- und Glass-Tokens aus colors_and_type.css.

   Direction: Slate-grey, sharp edges, minimal color. Brand accent (cedar)
   is rationed to primary actions/links/focus only. Status colors are
   inherited from colors_and_type.css (already muted/plotted-on-paper).
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------
     SLATE SCALE — cool technical grey, distinct from the warmer Paper/Folio
     neutrals used on marketing surfaces.
     --------------------------------------------------------------------- */
  --app-gray-50:  #F7F8F9;
  --app-gray-100: #EEF0F2;
  --app-gray-200: #E2E5E8;
  --app-gray-300: #CBD1D6;
  --app-gray-400: #9AA3AB;
  --app-gray-500: #6B7480;
  --app-gray-600: #4B535C;
  --app-gray-700: #343A42;
  --app-gray-800: #232830;
  --app-gray-900: #14171B;

  /* Semantic surfaces */
  --app-bg:            var(--app-gray-50);
  --app-surface:       #FFFFFF;
  --app-surface-alt:   var(--app-gray-100);
  --app-surface-sunken:var(--app-gray-100);
  --app-border:        var(--app-gray-200);
  --app-border-strong: var(--app-gray-300);
  /* Grenze interaktiver Steuerelemente (Input, Select, Checkbox, Toggle).
     Gemessen >=3:1 gegen surface und bg — WCAG 1.4.11. Nie fuer reine
     Trennlinien verwenden, dafuer bleibt --app-border. */
  --app-border-control:#868E96;
  --app-text:          var(--app-gray-900);
  --app-text-soft:     var(--app-gray-600);
  /* gemessen 5.33:1 auf surface, 5.02:1 auf bg, 4.67:1 auf surface-alt */
  --app-text-faint:    #636C76;
  --app-overlay:       rgba(20,23,27,0.48);

  /* Brand accent, rationed */
  --app-accent:        var(--accent);
  --app-accent-hover:  var(--accent-deep);
  --app-accent-tint:   var(--accent-tint);
  --app-focus-ring:    var(--accent-bright);

  /* ---------------------------------------------------------------------
     RADII — sharp, not soft. Structure comes from borders + density.
     --------------------------------------------------------------------- */
  --app-radius-xs: 2px;
  --app-radius-sm: 3px;
  --app-radius-md: 4px;
  --app-radius-lg: 6px;

  /* ---------------------------------------------------------------------
     TYPE — dense scale for tables/forms/panels.
     --------------------------------------------------------------------- */
  --app-fs-xs:  0.625rem;   /* 10 — mono micro labels, register codes */
  --app-fs-sm:  0.6875rem;  /* 11 — column heads, meta */
  --app-fs-base:0.75rem;    /* 12 — default UI text, table cells */
  --app-fs-md:  0.8125rem;  /* 13 — panel titles, emphasized text */
  --app-fs-lg:  0.875rem;   /* 14 — page title */
  --app-fs-xl:  1.0625rem;  /* 17 — section heading */
  --app-fs-2xl: 1.25rem;    /* 20 — largest in-app size */

  /* WEIGHTS — the app never goes above 500. Hierarchy comes from size,
     color and space, never from heavy type. */
  --app-weight-normal: 400; /* @kind font */
  --app-weight-medium: 500; /* @kind font */

  --app-tracking-label: 0.08em; /* @kind font */
  --app-tracking-badge: 0.03em; /* @kind font */
  --app-tracking-tight: -0.006em; /* @kind font */

  --app-lh-tight: 1.2;  /* @kind font */

  /* Eine Bewegungssprache: kurz und linear (Notion/Claude-Register). */
  --app-dur: 100ms; /* @kind other */
  --app-ease: linear; /* @kind other */
  --app-lh-body:  1.45; /* @kind font */

  /* ---------------------------------------------------------------------
     SPACING — tighter rhythm than marketing surfaces.
     --------------------------------------------------------------------- */
  --app-space-1: 2px;
  --app-space-2: 4px;
  --app-space-3: 6px;
  --app-space-4: 8px;
  --app-space-5: 12px;
  --app-space-6: 16px;
  --app-space-7: 24px;
  --app-space-8: 32px;
  /* Grosse Stufen fuer Seitenraender und Abschnittsabstaende der Arbeitsflaeche.
     Ergaenzt die dichte Skala nach oben, damit die App EINE Spacing-Skala hat
     und nicht fuer grosse Abstaende auf die Marketing-Skala ausweichen muss. */
  --app-space-9:  48px;
  --app-space-10: 64px;

  /* Component metrics */
  --app-row-h:         32px;
  --app-row-h-compact: 28px;
  --app-col-head-h:    28px;
  --app-control-h:     28px;
  --app-control-h-sm:  24px;
  --app-nav-item-h:    28px;
  --app-sidebar-w:     216px;
  /* Header bands: sidebar head, topbar and every panel head share one height,
     so hairlines line up across neighbouring columns. */
  --app-topbar-h:      44px;
  --app-panel-head-h:  36px;
  /* One inset governs every horizontal edge: sidebar rows, panel padding,
     table cells and topbar all start on the same axis. */
  --app-inset:         12px;
  --app-gutter:        12px;
  /* Zellen: eine Höhe, ein Padding, keine wachsenden Zeilen. Text wird
     abgeschnitten (Ellipsis), nie umgebrochen — Zeilen bleiben auf Raster. */
  --app-cell-pad:      12px;
  --app-cell-pad-tight: 6px;
  /* Spalten mit Elementinhalt brauchen ein Budget, das das Element trägt —
     Ellipsis kann ein Badge nicht kürzen, sie schert es ab. Status = Wort +
     Punkt + Innenabstand + 2× Zellpadding. */
  --app-col-status-w:  112px;
  --app-badge-h:       18px;
  --app-chip-h:        20px;

  /* Flat elevation — borders over shadows */
  --app-shadow-sm: none;
  /* Gedrückt: eine Schattenkante innen, keine Farbverschiebung. */
  --app-press-shade: inset 0 1px 0 rgba(20,23,27,0.16); /* @kind shadow */
  --app-shadow-md: 0 1px 2px rgba(20,23,27,0.04);
  --app-shadow-popover: 0 8px 24px -8px rgba(20,23,27,0.20), 0 0 0 1px rgba(20,23,27,0.06);
}

.app-scope {
  font-family: var(--font-sans);
  font-size: var(--app-fs-base);
  font-weight: var(--app-weight-normal);
  letter-spacing: var(--app-tracking-tight);
  color: var(--app-text);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}
/* Mono register: column heads, IDs, figures, eyebrows. */
.app-label {
  font-family: var(--font-mono);
  font-size: var(--app-fs-xs);
  font-weight: var(--app-weight-medium);
  letter-spacing: var(--app-tracking-label);
  text-transform: uppercase;
  color: var(--app-text-faint);
}
.app-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   DATA VIZ — kategoriale Reihe für Diagramme, Legenden, Heatmaps.
   Gedeckt, plottbar, keine Neonfarben. Reihenfolge ist verbindlich:
   Serie 1 = Akzent, danach abwärts in der Sättigung.
   ============================================================================ */
:root {
  --viz-1: #39584A; /* cedar — Hauptserie */
  --viz-2: #7C9A88; /* salbei */
  --viz-3: #AE5E38; /* rost */
  --viz-4: #9A6B33; /* ocker */
  --viz-5: #4C6272; /* schiefer-blau */
  --viz-6: #8A8578; /* pencil-warm */
  --viz-grid:  var(--app-gray-200);
  --viz-axis:  var(--app-gray-400);
  --viz-track: var(--app-gray-100);

  /* Sequenziell (Heatmap: wenig → viel) */
  --viz-seq-1: #EEF2EF;
  --viz-seq-2: #D3E0D8;
  --viz-seq-3: #A8C2B3;
  --viz-seq-4: #6E9280;
  --viz-seq-5: #39584A;

  /* ------------------------------------------------------------------
     CITATION / EXTRAKTION — Markierungsfarben im PDF-Beleg. Eine Farbe
     je Entitätstyp; ersetzt .mark-policy/.mark-premium/… im App.css.
     ------------------------------------------------------------------ */
  --cite-policy:    rgba(57,88,74,0.18);
  --cite-property:  rgba(76,98,114,0.18);
  --cite-insurer:   rgba(174,94,56,0.18);
  --cite-premium:   rgba(154,107,51,0.20);
  --cite-coverage:  rgba(124,154,136,0.22);
  --cite-missing:   rgba(168,73,61,0.20);
  --cite-active:    rgba(154,107,51,0.38);
  --cite-border:    rgba(20,23,27,0.16);

  /* ------------------------------------------------------------------
     ICONS — die App nutzt lucide-react. Verbindlich: nur diese drei
     Größen, Strichstärke 1.25, Farbe immer currentColor.
     ------------------------------------------------------------------ */
  --icon-sm: 12px;
  --icon-md: 14px;
  --icon-lg: 16px;
  --icon-stroke: 1.25; /* @kind other */

  /* ------------------------------------------------------------------
     Z-LAYER — eine Skala statt verstreuter z-index: 40/60/90/100.
     ------------------------------------------------------------------ */
  --z-sticky:  10; /* @kind other */
  --z-sidebar: 20; /* @kind other */
  --z-popover: 60; /* @kind other */
  --z-overlay: 80; /* @kind other */
  --z-toast:   90; /* @kind other */

}

/* ============================================================================
   AI / AUTOMATION — Tokens für einen durchautomatisierten Betrieb.
   Jeder Wert in dieser App hat eine Herkunft: Mensch, Automatik oder Vorschlag.
   Das muss sichtbar und einheitlich codiert sein — Haftungsfrage, nicht Kosmetik.
   ============================================================================ */
:root {
  /* Herkunft eines Werts */
  --auto-bg:        #EEF1F4;  /* automatisch übernommen */
  --auto-fg:        #4C6272;
  --auto-line:      #C9D3DA;
  --suggest-bg:     #F0EDE6;  /* Vorschlag, noch nicht entschieden */
  --suggest-fg:     #7A6A45;
  --suggest-line:   #DCD3BE;
  --human-bg:       var(--app-surface-alt); /* manuell gesetzt/bestätigt */
  --human-fg:       var(--app-text-soft);

  /* Konfidenz — drei Stufen, keine Prozent-Ästhetik ohne Schwelle */
  --conf-high:      var(--status-ok);      /* >= 0.90 automatisch übernehmbar */
  --conf-mid:       var(--status-watch);   /* 0.70–0.89 Sichtprüfung */
  --conf-low:       var(--status-risk);    /* < 0.70 Mensch entscheidet */
  --conf-track:     var(--app-gray-200);

  /* Diff: alter vs. neuer Wert */
  --diff-old-fg:    var(--app-text-faint);
  --diff-new-bg:    var(--status-ok-tint);
  --diff-new-fg:    var(--status-ok);

  /* Live/Streaming */
  --stream-shimmer-a: var(--app-gray-100);
  --stream-shimmer-b: var(--app-gray-200);

  /* ------------------------------------------------------------------
     HERKUNFTSLINIE — die Signatur dieses Systems.
     Nicht das Abzeichen trägt die Herkunft, sondern der Wert selbst: eine
     2px-Linie unter dem Wert codiert, wer ihn gesetzt hat. Menschlich
     gesetzte Werte sind unmarkiert — der Normalfall bleibt ruhig. Die
     Linie liegt im Hintergrund (kein Rahmen), verschiebt also keine
     Grundlinie und funktioniert in Zellen, Feldern und Fließtext gleich.
     ------------------------------------------------------------------ */
  --origin-rule-w:    2px;
  --origin-dash:      3px;   /* Strichlänge im Vorschlagsmuster */
  /* Herkunftslinien tragen Bedeutung, nicht Dekor: alle >=3:1 gemessen. */
  --origin-auto-line:    #788594;
  --origin-suggest-line: #A08334;
  --origin-stale-line:   #868E96;  /* 3.32:1 — Zustandstraeger, nicht Dekor */
}

/* Herkunft, angewandt: eine Klasse je Zustand. Reihenfolge = Verbindlichkeit. */
.app-origin { background-repeat: repeat-x; background-position: 0 100%; }
.app-origin-auto { background-image: linear-gradient(var(--origin-auto-line), var(--origin-auto-line)); background-size: 100% var(--origin-rule-w); background-repeat: repeat-x; background-position: 0 100%; }
.app-origin-suggest { background-image: repeating-linear-gradient(90deg, var(--origin-suggest-line) 0 var(--origin-dash), transparent var(--origin-dash) calc(var(--origin-dash) * 2)); background-size: 100% var(--origin-rule-w); background-repeat: repeat-x; background-position: 0 100%; }
.app-origin-stale { background-image: repeating-linear-gradient(90deg, var(--origin-stale-line) 0 1px, transparent 1px 3px); background-size: 100% var(--origin-rule-w); background-repeat: repeat-x; background-position: 0 100%; }
.app-origin-human { background-image: none; }

@keyframes app-shimmer { from { background-position: -180px 0; } to { background-position: 180px 0; } }
@keyframes app-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.app-streaming {
  background: linear-gradient(90deg, var(--stream-shimmer-a) 0%, var(--stream-shimmer-b) 50%, var(--stream-shimmer-a) 100%);
  background-size: 180px 100%;
  animation: app-shimmer 1.1s linear infinite;
}
.app-live { animation: app-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .app-streaming, .app-live { animation: none; }
}

/* ============================================================================
   DICHTE — [data-density="compact"] am Wurzelelement schaltet die Arbeitsfläche
   auf Maximaldichte. Nur Metriken, keine Farben: das Layout bleibt identisch.
   ============================================================================ */
[data-density='compact'] {
  --app-row-h:          26px;
  --app-row-h-compact:  22px;
  --app-col-head-h:     24px;
  --app-control-h:      24px;
  --app-control-h-sm:   20px;
  --app-nav-item-h:     24px;
  --app-topbar-h:       36px;
  --app-panel-head-h:   30px;
  --app-inset:          8px;
  --app-gutter:         8px;
  --app-cell-pad:       8px;
  --app-cell-pad-tight: 4px;
  --app-col-status-w:   100px;
}

/* ============================================================================
   DARK — [data-theme="dark"]. Nur die App-Ebene; Marken-/Kundenflächen bleiben
   hell. Slate invertiert, Akzent aufgehellt (Kontrast auf dunklem Grund),
   Statusfarben behalten ihre Bedeutung, werden aber angehoben.
   ============================================================================ */
[data-theme='dark'] {
  --app-gray-50:  #16191D;
  --app-gray-100: #1C2024;
  --app-gray-200: #262B31;
  --app-gray-300: #333A41;
  --app-gray-400: #6B7480;
  --app-gray-500: #8A9299;
  --app-gray-600: #A8AFB6;
  --app-gray-700: #C6CBD0;
  --app-gray-800: #DFE3E6;
  --app-gray-900: #F2F4F6;

  --app-bg:            #121519;
  --app-surface:       #191D21;
  --app-surface-alt:   #20252A;
  --app-surface-sunken:#14181C;
  --app-border:        #262B31;
  --app-border-strong: #333A41;
  --app-border-control:#626B75;
  --app-text:          #F2F4F6;
  --app-text-soft:     #A8AFB6;
  --app-text-faint:    #838B94;
  --app-overlay:       rgba(8,10,12,0.62);

  --app-accent:        #6E9C86;
  --app-accent-hover:  #85B29B;
  --app-accent-tint:   #1F2C28;
  --app-focus-ring:    #85B29B;

  --status-ok:       #7FA98D;  --status-ok-tint:    #1C2721;
  --status-watch:    #C39A5C;  --status-watch-tint: #2A2419;
  --status-risk:     #CE8177;  --status-risk-tint:  #2C1E1C;
  --status-neutral:  #8A8F96;

  --auto-bg: #1D242B; --auto-fg: #9FB4C2; --auto-line: #2C3742;
  --suggest-bg: #262218; --suggest-fg: #C9B688; --suggest-line: #3A3325;
  --human-bg: #20252A; --human-fg: #A8AFB6;
  --conf-track: #262B31;
  --diff-new-bg: #1C2721; --diff-new-fg: #7FA98D;
  --stream-shimmer-a: #1C2024; --stream-shimmer-b: #262B31;
  --app-press-shade: inset 0 1px 0 rgba(0,0,0,0.32); /* @kind shadow */

  --viz-1: #6E9C86; --viz-2: #9FB48F; --viz-3: #C98A63; --viz-4: #C0A06A; --viz-5: #7E96A6; --viz-6: #9C978A;
  --viz-grid: #262B31; --viz-axis: #333A41; --viz-track: #20252A;
  --viz-seq-1: #1C2024; --viz-seq-2: #24322C; --viz-seq-3: #33493F; --viz-seq-4: #4B6E5D; --viz-seq-5: #6E9C86;

  --cite-policy: rgba(110,156,134,0.26); --cite-property: rgba(126,150,166,0.26);
  --cite-insurer: rgba(201,138,99,0.26); --cite-premium: rgba(192,160,106,0.28);
  --cite-coverage: rgba(159,180,143,0.26); --cite-missing: rgba(206,129,119,0.28);
  --cite-active: rgba(192,160,106,0.46); --cite-border: rgba(255,255,255,0.22);

  --origin-auto-line: #5A6E7E; --origin-suggest-line: #A98F4E; --origin-stale-line: #666F79;
}

/* Fokus: eine sichtbare Regel für die gesamte Arbeitsfläche. */
.app-scope :where(a, button, input, select, textarea, [tabindex]):focus-visible,
[data-focus-ring]:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 1px;
  border-radius: var(--app-radius-xs);
}