/* =========================================================================
   FahrerApp Design System – Colors & Type
   Source of truth: meinfahrer/core-front src/theme.ts (MUI v5 theme)
   Density: globaler Spacing-Scale-Faktor 0.85, MUI inputs/buttons/chips
            default size="small". In Modals/Drawers/Dialogs ist Schrift
            einheitlich auf 13px gezwungen (Informationsdichte).
   ========================================================================= */

/* Google Fonts @import removed v1.4.0 – fonts are now self-hosted, see fonts.css */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────── */
  --fa-primary:           rgba(2, 5, 211, 1);     /* #0205D3 */
  --fa-primary-dark:      rgba(0, 3, 139, 1);     /* #00038B */
  --fa-primary-light:     rgb(63, 81, 255);       /* #3F51FF */
  --fa-primary-tint-04:   rgba(2, 5, 211, 0.04);
  --fa-primary-tint-06:   rgba(2, 5, 211, 0.06);  /* sidebar active bg */
  --fa-primary-tint-08:   rgba(2, 5, 211, 0.08);  /* sidebar active hover */
  --fa-primary-tint-16:   rgba(2, 5, 211, 0.16);

  --fa-secondary:         #f5d312;                /* MeinFahrer Gelb */
  --fa-secondary-light:   #fffadd;
  --fa-secondary-dark:    #f5d312;

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --fa-success:           rgb(34, 154, 22);
  --fa-success-light:     rgba(84, 214, 44, 0.16);
  --fa-success-dark:      #1b5e20;

  --fa-warning:           rgb(183, 129, 3);
  --fa-warning-light:     rgba(255, 193, 7, 0.16);
  --fa-warning-dark:      #e65100;

  --fa-error:             rgb(183, 33, 54);
  --fa-error-light:       rgba(255, 72, 66, 0.16);
  --fa-error-dark:        #c62828;

  --fa-info:              rgb(2, 136, 209);
  --fa-info-light:        rgba(2, 136, 209, 0.16);
  --fa-info-dark:         #01579b;

  /* ── Neutrals (Tailwind-Slate-Familie, aus MUI text + sidebar) ──────── */
  --fa-text-primary:      #4b5563;   /* Body */
  --fa-text-secondary:    #6b7280;   /* Sub-body / Captions */
  --fa-text-disabled:     #9ca3af;   /* Disabled / Group-Labels */
  --fa-text-strong:       #1e2731;   /* Detail-Links / Headings im Content */

  --fa-bg-app:            #f8f8fc;   /* Body background */
  --fa-bg-surface:        #ffffff;   /* Cards / Forms */
  --fa-bg-input-fill:     #f7f7f7;   /* Autofill / Filled inputs */
  --fa-bg-soft:           #f1f7fa;   /* Editor backgrounds */

  --fa-divider:           rgba(0, 0, 0, 0.06);
  --fa-divider-strong:    rgba(0, 0, 0, 0.08);
  --fa-overlay:           rgba(0, 0, 0, 0.30);

  /* Banner / hint colors aus Sidebar (yellow notice) */
  --fa-notice-bg:         #fef3c7;
  --fa-notice-border:     #fde68a;
  --fa-notice-fg:         #92400e;

  /* ── Type ──────────────────────────────────────────────────────────── */
  --fa-font-body:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fa-font-ui:           "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --fa-font-display:      "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --fa-font-mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Density-Scale aus theme.ts:  base 16px * 87.5% (App.css html font-size) */
  --fa-font-size-base:    14px;
  --fa-font-size-dense:   13px;     /* Modal/Drawer/Dialog forced */
  --fa-font-size-xs:      11px;     /* group labels, micro */
  --fa-font-size-sm:      13px;
  --fa-font-size-md:      14px;
  --fa-font-size-lg:      16px;
  --fa-font-size-xl:      18px;
  --fa-font-size-2xl:     22px;
  --fa-font-size-3xl:     28px;

  --fa-fw-regular:        400;
  --fa-fw-medium:         500;
  --fa-fw-semibold:       600;
  --fa-fw-bold:           700;

  --fa-lh-tight:          1.25;
  --fa-lh-normal:         1.45;
  --fa-lh-relaxed:        1.6;

  --fa-letter-tight:      -0.01em;
  --fa-letter-uppercase:  0.06em;     /* Sidebar-Gruppen-Labels */

  /* ── Spacing (Faktor × 8 × 0.85) ───────────────────────────────────── */
  --fa-space-0:           0;
  --fa-space-1:           6.8px;     /* 1 * 8 * 0.85 */
  --fa-space-2:           13.6px;
  --fa-space-3:           20.4px;
  --fa-space-4:           27.2px;
  --fa-space-5:           34px;
  --fa-space-6:           40.8px;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --fa-radius-xs:         4px;       /* default MUI button */
  --fa-radius-sm:         6px;       /* sidebar items */
  --fa-radius-md:         8px;       /* cards, editors */
  --fa-radius-lg:         12px;
  --fa-radius-pill:       999px;

  /* ── Shadows (Tailwind-style, sehr dezent) ─────────────────────────── */
  --fa-shadow-1:          0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --fa-shadow-2:          0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --fa-shadow-3:          0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  --fa-shadow-4:          0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  --fa-shadow-popover:    0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --fa-shadow-modal:      0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ── Semantische Type-Tokens ────────────────────────────────────────── */

html { font-size: 87.5%; }            /* MeinFahrer App.css base */

body {
  font-family: var(--fa-font-body);
  color: var(--fa-text-primary);
  background-color: var(--fa-bg-app);
  font-size: var(--fa-font-size-base);
  line-height: var(--fa-lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1 { font: 700 var(--fa-font-size-3xl)/1.2 var(--fa-font-ui);  color: var(--fa-text-strong); margin: 0; letter-spacing: var(--fa-letter-tight); }
h2 { font: 600 var(--fa-font-size-2xl)/1.25 var(--fa-font-ui); color: var(--fa-text-strong); margin: 0; letter-spacing: var(--fa-letter-tight); }
h3 { font: 600 var(--fa-font-size-xl)/1.3 var(--fa-font-ui);   color: var(--fa-text-strong); margin: 0; }
h4 { font: 600 var(--fa-font-size-lg)/1.35 var(--fa-font-ui);  color: var(--fa-text-strong); margin: 0; }
h5 { font: 600 var(--fa-font-size-md)/1.4 var(--fa-font-ui);   color: var(--fa-text-strong); margin: 0; }
h6 { font: 600 var(--fa-font-size-sm)/1.4 var(--fa-font-ui);   color: var(--fa-text-secondary); margin: 0; text-transform: uppercase; letter-spacing: var(--fa-letter-uppercase); }

p, .fa-body { font: 400 var(--fa-font-size-md)/var(--fa-lh-normal) var(--fa-font-body); color: var(--fa-text-primary); margin: 0; }

.fa-caption { font: 500 var(--fa-font-size-xs)/1.3 var(--fa-font-ui); color: var(--fa-text-disabled); text-transform: uppercase; letter-spacing: var(--fa-letter-uppercase); }
.fa-mono    { font-family: var(--fa-font-mono); font-size: var(--fa-font-size-sm); }
.fa-dense   { font-size: var(--fa-font-size-dense); }   /* Modal/Drawer override */

/* Helper utility – kompakter Daten-Text in Tabellen */
.fa-table-cell { font: 400 var(--fa-font-size-sm)/1.3 var(--fa-font-body); color: var(--fa-text-primary); }
.fa-table-head { font: 600 var(--fa-font-size-xs)/1.2 var(--fa-font-ui);   color: var(--fa-text-secondary); text-transform: uppercase; letter-spacing: var(--fa-letter-uppercase); }