/* Fahrnova — Design-Tokens (Nordlicht-Palette)
   Einzige Quelle der Wahrheit für Farben, Typo, Radien, Schatten.
   In Blazor: als wwwroot/css/fahrnova-tokens.css einbinden, VOR app.css. */

:root {
  /* Flächen */
  --fn-bg:            #ECF0F4;  /* Arbeitsfläche (Papiergrund) */
  --fn-surface:       #FAFBFD;  /* Karten, Tabellen, Kopfzeilen */
  --fn-sunken:        #DEE4EB;  /* Tab-Schiene, Fortschrittsspur, Zebrastreifen */
  --fn-input:         #FAFBFD;
  --fn-header-bg:     rgba(250,251,253,0.9);
  --fn-hairline:      #D6DCE4;  /* JEDE Trennlinie, 1px */

  /* Schrift */
  --fn-text:          #17222E;  /* Primärtext */
  --fn-muted:         #4A5B6B;  /* Sekundärtext, Labels (AA auf --fn-bg) */
  --fn-muted-text:    #41566B;  /* Sekundärtext auf --fn-sunken */

  /* Marke */
  --fn-accent:        #1E3549;  /* dunkler Primärknopf */
  --fn-accent-text:   #EFF4F8;
  --fn-copper:        #2E8188;  /* Signal-Türkis: Akzentlinien, Marken, Logo */
  --fn-copper-text:   #1F5C61;  /* Türkis als TEXT (kontraststark) */
  --fn-mark-bg:       #256A70;  /* Avatar-/Initialen-Kreise */
  --fn-mark-text:     #F1F8F8;

  /* Navigation (dunkle Schiene links) */
  --fn-nav-bg:        #16283A;
  --fn-nav-text:      #DEE7EF;
  --fn-nav-muted:     #7F93A4;
  --fn-nav-line:      #20364B;
  --fn-nav-tint:      #20364B;  /* Hover */
  --fn-nav-active-bg: #1E3549;
  --fn-nav-active-text: #F3F8FB;

  /* Status: -Fläche für Tints, -Text für Schrift auf hellem Grund */
  --fn-ok:            #2E7D4F;  --fn-ok-text:   #215C3A;
  --fn-warn:          #C98A16;  --fn-warn-text: #8A5D0A;
  --fn-info:          #2F6FD0;  --fn-info-text: #255A9E;
  --fn-off:           #9AA7B3;  /* inaktiv / archiviert */

  /* Status-Tints (Pillen-Hintergründe) */
  --fn-tint-ok:       #E2F0E7;
  --fn-tint-warn:     #FBF0D8;
  --fn-tint-info:     #E4ECF7;
  --fn-tint-copper:   #E1EFF0;
  --fn-tint-error:    #F6E4E0;
  --fn-error:         #B3402B;  /* Konflikt / Doppelbelegung */

  /* Tabs */
  --fn-tab-active-bg:   #FAFBFD;
  --fn-tab-active-text: #17222E;

  /* Schatten */
  --fn-shadow-tab:  0 1px 2px rgba(23,34,46,0.12), 0 3px 10px rgba(23,34,46,0.07);
  --fn-shadow-card: 0 1px 2px rgba(23,34,46,0.05), 0 8px 24px rgba(23,34,46,0.05);
  --fn-shadow-sheet: 0 -1px 4px rgba(23,34,46,0.08), 0 -22px 56px rgba(23,34,46,0.20);
  --fn-scrim:       rgba(23,34,46,0.34);  /* Modal-Hintergrund */

  /* Typo */
  --fn-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fn-fs-h1:      27px;  /* Seitentitel, 600, -0.025em, lh 1.1 */
  --fn-fs-card:  14.5px;  /* Kartentitel, 600 */
  --fn-fs-body:  13.5px;  /* Fließtext, Untertitel */
  --fn-fs-row:     13px;  /* Tabellenzelle */
  --fn-fs-meta:  12.5px;  /* Meta, Krume, Knöpfe */
  --fn-fs-small:   12px;  /* Kennzahlen-Beschriftung */
  --fn-fs-micro: 11.5px;  /* Hilfstext */
  --fn-fs-kicker:10.5px;  /* Kicker: 700, 0.16em, uppercase */
  --fn-fs-navsec:  10px;  /* Nav-Gruppentitel: 700, 0.16em, uppercase */

  /* Radien */
  --fn-r-pill:  999px;
  --fn-r-card:   14px;
  --fn-r-panel:  12px;
  --fn-r-tabbar: 10px;
  --fn-r-ctrl:    8px;  /* Knöpfe, Felder, Tabs */

  /* Raster: alle Abstände sind Vielfache von 2, tragende Werte hier */
  --fn-gap-1:  4px;
  --fn-gap-2:  8px;
  --fn-gap-3: 10px;
  --fn-gap-4: 14px;
  --fn-gap-5: 18px;
  --fn-gap-6: 24px;
  --fn-pad-page-x: 28px;  /* linker/rechter Innenrand des Inhaltsbereichs */
  --fn-nav-width: 244px;  /* Breite der linken Schiene, fix */
}

/* Fokus: NIE der Browser-Standard */
:focus-visible { outline: 2px solid var(--fn-copper); outline-offset: 2px; }

/* Scrollbars (10px, Nordlicht-Daumen) */
* { scrollbar-width: thin; scrollbar-color: #B6C2CE transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #B6C2CE; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }