/* ==========================================================================
   matchDesk UI-Kit · Tokens
   Abgeleitet aus sites/matchdesk (Tinte #404F68, Pink #FF4F79, Plus Jakarta
   Sans, IBM Plex Mono). Jede Farbe, jeder Schatten und jede Schrift im Kit
   kommt aus dieser Datei; Komponenten referenzieren dafür nur var(--md-*).
   Abstände, Radien und Maße nutzen --md-space-* und --md-radius-*, wo es sie
   gibt; einzelne Komponentenmaße stehen noch als px im 4er-Raster und werden
   beim Aufräumen (HAN-6022) auf Tokens umgestellt.
   Kontraste gerechnet (WCAG 2.2): Text >= 4.5:1, Feldrahmen und Fokus >= 3:1.

   Quelle ist seit HAN-5998 diese Datei (die Entwurfskopie in docs/ui-neubau/kit/
   ist eingefroren). Die Tokens sind reine Custom Properties und ändern keinen
   alten Bildschirm. Was Browser-Elemente umfärbt (color-scheme), steht deshalb
   nur unter .md-root, ganz unten in dieser Datei.
   ========================================================================== */

:root {
  /* --- Logo: eine Quelle je Theme, Dateien in frontend/src/img/ (aus sites/matchdesk/brand/).
         Der Pfad gilt von dieser Datei aus, alle md-Dateien liegen im selben Ordner. ------ */
  --md-logo: url('../img/logo.png');

  /* --- Tinte: eine kühle Neutralskala im Farbton der Website-Tinte ------- */
  --md-ink-950: #1B2230;
  --md-ink-900: #27313F;   /* 13.2:1 auf Weiß */
  --md-ink-800: #333F55;   /* 10.6:1 */
  --md-ink-700: #404F68;   /* 8.3:1  Website-Tinte, Standardtext */
  --md-ink-600: #5E6A83;   /* 5.4:1  Sekundärtext, auch auf Seitenfläche 4.9:1 */
  --md-ink-550: #66728A;   /* 4.8:1  Platzhalter (nur auf Feldfläche/Weiß) */
  --md-ink-500: #7A859D;   /* 3.7:1  nur Icons und große Schrift */
  --md-ink-400: #9AA3B5;   /* deaktiviert */
  --md-ink-300: #B9C1D0;
  --md-ink-200: #D5DAE3;
  --md-ink-100: #E8EBF0;
  --md-ink-50:  #F4F6F9;

  /* --- Pink: Marke. #FF4F79 nur für Signale (Fokus, aktive Navigation,
         Auswahl, Fortschritt). Flächen mit weißer Schrift nehmen den
         Pressed-Ton der Website #D6335C (4.7:1), sonst fiele AA durch. ---- */
  --md-pink-50:  #FFF3F6;
  --md-pink-100: #FFE4EB;  /* Website-Tönung */
  --md-pink-200: #FFC7D5;
  --md-pink-400: #FF4F79;  /* Marke, 3.2:1 auf Weiß: nur Nicht-Text */
  --md-pink-500: #E8446D;
  --md-pink-600: #D6335C;  /* Primärfläche, Weiß darauf 4.7:1 */
  --md-pink-700: #BC2A50;  /* Hover */
  --md-pink-800: #A11738;  /* Pressed, Text auf Tönung 6.5:1 */

  /* --- Status: gedämpft, Text auf Tönung jeweils >= 5.6:1 ---------------- */
  --md-success-bg: #E6F4EC;  --md-success-fg: #1D6B48;  --md-success-line: #9ED3B6;  --md-success-solid: #23865A;
  --md-warning-bg: #FDF1DB;  --md-warning-fg: #8A5300;  --md-warning-line: #EBC98A;  --md-warning-solid: #B26B00;
  --md-danger-bg:  #FDECEA;  --md-danger-fg:  #B42318;  --md-danger-line:  #F0B3AC;  --md-danger-solid:  #B42318;
  --md-info-bg:    #E8EFF8;  --md-info-fg:    #2D5A8C;  --md-info-line:    #AFC6E3;  --md-info-solid:    #3A6EA8;
  --md-neutral-bg: #EEF0F4;  --md-neutral-fg: #404F68;  --md-neutral-line: #CDD3DD;
  --md-accent-bg:  var(--md-pink-100); --md-accent-fg: var(--md-pink-800); --md-accent-line: var(--md-pink-200);

  /* --- Semantische Rollen (nur diese in Komponenten benutzen) ------------ */
  --md-bg-page:      #F2F2F2;             /* Website-Seitenfläche */
  --md-bg-surface:   #FFFFFF;             /* Karten, Tabellen, Leiste */
  --md-bg-subtle:    #F7F8FA;             /* Tabellenkopf, Lesemodus-Flächen */
  --md-bg-sunken:    #EEF0F3;             /* Segmente, Code, Schienen */
  --md-bg-field:     #FBFBFC;             /* Website-Feldfläche */
  --md-bg-hover:     rgba(64, 79, 104, .06);
  --md-bg-pressed:   rgba(64, 79, 104, .10);
  --md-bg-selected:  var(--md-pink-50);
  --md-bg-inverse:   #27313F;
  --md-bg-overlay:   rgba(23, 29, 40, .42);

  --md-text:         var(--md-ink-700);
  --md-text-strong:  var(--md-ink-900);
  --md-text-muted:   var(--md-ink-600);
  --md-text-placeholder: var(--md-ink-550);
  --md-text-disabled: var(--md-ink-400);
  --md-text-inverse: #F4F6F9;
  --md-text-on-accent: #FFFFFF;
  --md-icon:         var(--md-ink-600);
  --md-icon-muted:   var(--md-ink-500);

  --md-line-soft:    rgba(64, 79, 104, .08);  /* Trenner in Karten */
  --md-line:         rgba(64, 79, 104, .12);  /* Karten-, Tabellenrahmen */
  --md-line-strong:  rgba(64, 79, 104, .22);  /* Sekundärbutton, Segmente */
  --md-line-field:   #7F899C;                 /* Feldrahmen, 3.5:1 auf Weiß, 3.1:1 auf der Seitenfläche */

  --md-accent:        var(--md-pink-600);
  --md-accent-hover:  var(--md-pink-700);
  --md-accent-press:  var(--md-pink-800);
  --md-signal:        var(--md-pink-400);     /* Marke: Marker, Fortschritt, Grafik. Nie für Schrift und nie für Zustände (2,8:1 auf der Seite) */
  --md-focus:         var(--md-pink-600);     /* 4.7:1 auf Weiß, 4.2:1 auf der Seitenfläche */

  /* Statusfarben auf der inversen Fläche (Toasts) */
  --md-on-inverse-success: #5CC98F;
  --md-on-inverse-warning: #F2B34C;
  --md-on-inverse-danger:  #FF8A7A;
  --md-on-inverse-info:    #7FB0EA;
  --md-on-inverse-focus:   #FF8FAB;  /* Fokusring auf dunklen Flächen (Toast): 5,8:1 */

  /* --- Schrift ------------------------------------------------------------ */
  --md-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --md-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --md-fs-display: 2rem;      /* 32  Portal-Anmeldung, Assistent */
  --md-fs-h1:      1.5rem;    /* 24  Seitentitel */
  --md-fs-h2:      1.125rem;  /* 18  Abschnitt */
  --md-fs-h3:      0.9375rem; /* 15  Karte */
  --md-fs-body:    0.875rem;  /* 14  Standard */
  --md-fs-table:   0.84375rem;/* 13.5 Tabellen */
  --md-fs-small:   0.8125rem; /* 13  Hilfetext, Metazeile */
  --md-fs-caption: 0.75rem;   /* 12  Badges */
  --md-fs-label:   0.71875rem;/* 11.5 Mono-Versalien */
  --md-fs-kpi:     1.625rem;  /* 26  Kennzahl */

  --md-lh-tight: 1.2;
  --md-lh-snug:  1.35;
  --md-lh-body:  1.55;
  --md-tracking-label: .06em;
  --md-tracking-title: -.015em;

  /* --- Abstand: 4er-Raster ------------------------------------------------ */
  --md-space-0-5: 2px;  --md-space-1: 4px;   --md-space-1-5: 6px;  --md-space-2: 8px;
  --md-space-3: 12px;   --md-space-4: 16px;  --md-space-5: 20px;   --md-space-6: 24px;
  --md-space-8: 32px;   --md-space-10: 40px; --md-space-12: 48px;  --md-space-16: 64px;

  /* --- Form ---------------------------------------------------------------- */
  --md-radius-xs: 6px;     /* Badges, Kbd (Website: Status-Chip 6 px) */
  --md-radius-control: 10px;   /* Buttons und Felder (Website: 10 px) */
  --md-radius-control-sm: 8px; /* kleine Buttons, Segmente, Chips */
  --md-radius-sm: 8px;     /* Menüzeilen, Kalenderblöcke */
  --md-radius-field: 10px; /* Felder (Website) */
  --md-radius-md: 12px;    /* Banner, Innenflächen */
  --md-radius-card: 14px;  /* Karten */
  --md-radius-dialog: 18px;/* Dialoge, Portal-Karten */
  --md-radius-pill: 999px; /* nur Zähler und Schalter */

  --md-shadow-1: 0 1px 2px rgba(64, 79, 104, .05), 0 10px 22px -18px rgba(64, 79, 104, .45);
  --md-shadow-2: 0 2px 6px rgba(64, 79, 104, .08), 0 18px 40px -20px rgba(64, 79, 104, .45);
  --md-shadow-3: 0 4px 12px rgba(23, 35, 58, .08), 0 28px 60px -34px rgba(23, 35, 58, .60);
  --md-shadow-focus: 0 0 0 3px rgba(214, 51, 92, .22);
  --md-shadow-focus-danger: 0 0 0 3px rgba(180, 35, 24, .18);
  --md-shadow-accent: 0 1px 2px rgba(161, 23, 56, .18);
  --md-ring-accent-soft: 0 0 0 3px rgba(214, 51, 92, .10);
  --md-shadow-knob: 0 1px 2px rgba(23, 35, 58, .30);
  --md-knob: #FFFFFF;
  --md-text-on-solid: #FFFFFF;           /* Schrift auf Status-Vollflächen */
  --md-bg-hover-inverse: rgba(255, 255, 255, .12);
  --md-bg-art: var(--md-pink-50);        /* Markenfläche der Anmeldung */

  /* --- Dichte: Komfort (Portal, Formulare) ist Standard -------------------- */
  --md-control-h: 40px;
  --md-control-h-sm: 32px;
  --md-control-px: 16px;
  --md-row-h: 48px;
  --md-card-pad: 24px;
  --md-page-pad: 32px;
  --md-gap: 24px;

  /* --- Bewegung ----------------------------------------------------------- */
  --md-ease: cubic-bezier(.2, .8, .2, 1);
  --md-dur-1: 120ms;  /* Hover, Farbe */
  --md-dur-2: 180ms;  /* Menüs, Toasts */
  --md-dur-3: 240ms;  /* Dialoge, Seitenpanel */

  /* --- Ebenen --------------------------------------------------------------- */
  --md-z-sticky: 10; --md-z-nav: 20; --md-z-popover: 40; --md-z-drawer: 50; --md-z-modal: 60; --md-z-toast: 70;

  /* --- Maße des Rahmens ----------------------------------------------------- */
  --md-sidebar-w: 248px;
  --md-sidebar-w-collapsed: 64px;
  --md-topbar-h: 60px;
  --md-content-max: 1440px;
  --md-portal-max: 1120px;
}

/* Komfort ausdrücklich (z. B. Portal-Bereich innerhalb einer kompakten Seite) */
[data-density="comfortable"] {
  --md-control-h: 40px;
  --md-control-h-sm: 32px;
  --md-control-px: 16px;
  --md-row-h: 48px;
  --md-card-pad: 24px;
  --md-page-pad: 32px;
  --md-gap: 24px;
}

/* Kompakt: Admin-Tabellen und Arbeitsansichten. Nur Maße, keine Farben. */
[data-density="compact"] {
  --md-control-h: 34px;
  --md-control-h-sm: 28px;
  --md-control-px: 14px;
  --md-row-h: 38px;
  --md-card-pad: 18px;
  --md-page-pad: 24px;
  --md-gap: 16px;
}

/* ==========================================================================
   Dunkel. Gleiche Rollen, eigene Werte. Aktiv über data-theme="dark"
   oder Systemeinstellung, solange nicht ausdrücklich hell gewählt ist.
   ========================================================================== */
:root[data-theme="dark"] {
  --md-logo: url('../img/logo-inverted.png');
  --md-success-bg: #1C3534; --md-success-fg: #5CC98F; --md-success-line: #2E5E4A; --md-success-solid: #2E9E68;
  --md-warning-bg: #373229; --md-warning-fg: #F2B34C; --md-warning-line: #6B5530; --md-warning-solid: #C98A1E;
  --md-danger-bg:  #38262C; --md-danger-fg:  #FF8A7A; --md-danger-line:  #6E3A37; --md-danger-solid:  #C93A30;
  --md-info-bg:    #202F44; --md-info-fg:    #7FB0EA; --md-info-line:    #34507A; --md-info-solid:    #4F8CD6;
  --md-neutral-bg: #2A3140; --md-neutral-fg: #C9D0DC; --md-neutral-line: #3D4658;
  --md-accent-bg:  #3C2535; --md-accent-fg:  #FF8FAB; --md-accent-line:  #6A3350;
  --md-on-inverse-success: #5CC98F; --md-on-inverse-warning: #F2B34C; --md-on-inverse-danger: #FF8A7A; --md-on-inverse-info: #7FB0EA; --md-on-inverse-focus: #FF8FAB;

  --md-focus:       #FF4F79;
  --md-bg-art:      #22182A;
  --md-bg-page:     #10151D;
  --md-bg-surface:  #171D28;
  --md-bg-subtle:   #1C2330;
  --md-bg-sunken:   #121720;
  --md-bg-field:    #141A24;
  --md-bg-hover:    rgba(230, 234, 241, .06);
  --md-bg-pressed:  rgba(230, 234, 241, .10);
  --md-bg-selected: #2A1D29;
  --md-bg-inverse:  #2B3445;
  --md-bg-overlay:  rgba(5, 8, 12, .62);

  --md-text:         #E6EAF1;
  --md-text-strong:  #F4F6F9;
  --md-text-muted:   #A6B0C2;
  --md-text-placeholder: #8C97AB;
  --md-text-disabled: #5D687C;
  --md-text-inverse: #F4F6F9;
  --md-icon:         #A6B0C2;
  --md-icon-muted:   #7D889C;

  --md-line-soft:   rgba(230, 234, 241, .07);
  --md-line:        rgba(230, 234, 241, .11);
  --md-line-strong: rgba(230, 234, 241, .20);
  --md-line-field:  #737F95;

  --md-shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 22px -18px rgba(0, 0, 0, .70);
  --md-shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .75);
  --md-shadow-3: 0 4px 12px rgba(0, 0, 0, .40), 0 28px 60px -34px rgba(0, 0, 0, .85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --md-logo: url('../img/logo-inverted.png');
    --md-success-bg: #1C3534; --md-success-fg: #5CC98F; --md-success-line: #2E5E4A; --md-success-solid: #2E9E68;
    --md-warning-bg: #373229; --md-warning-fg: #F2B34C; --md-warning-line: #6B5530; --md-warning-solid: #C98A1E;
    --md-danger-bg:  #38262C; --md-danger-fg:  #FF8A7A; --md-danger-line:  #6E3A37; --md-danger-solid:  #C93A30;
    --md-info-bg:    #202F44; --md-info-fg:    #7FB0EA; --md-info-line:    #34507A; --md-info-solid:    #4F8CD6;
    --md-neutral-bg: #2A3140; --md-neutral-fg: #C9D0DC; --md-neutral-line: #3D4658;
    --md-accent-bg:  #3C2535; --md-accent-fg:  #FF8FAB; --md-accent-line:  #6A3350;
    --md-on-inverse-success: #5CC98F; --md-on-inverse-warning: #F2B34C; --md-on-inverse-danger: #FF8A7A; --md-on-inverse-info: #7FB0EA; --md-on-inverse-focus: #FF8FAB;
    --md-focus: #FF4F79; --md-bg-art: #22182A; --md-bg-page: #10151D; --md-bg-surface: #171D28; --md-bg-subtle: #1C2330; --md-bg-sunken: #121720;
    --md-bg-field: #141A24; --md-bg-hover: rgba(230, 234, 241, .06); --md-bg-pressed: rgba(230, 234, 241, .10);
    --md-bg-selected: #2A1D29; --md-bg-inverse: #2B3445; --md-bg-overlay: rgba(5, 8, 12, .62);
    --md-text: #E6EAF1; --md-text-strong: #F4F6F9; --md-text-muted: #A6B0C2; --md-text-placeholder: #8C97AB;
    --md-text-disabled: #5D687C; --md-text-inverse: #F4F6F9; --md-icon: #A6B0C2; --md-icon-muted: #7D889C;
    --md-line-soft: rgba(230, 234, 241, .07); --md-line: rgba(230, 234, 241, .11);
    --md-line-strong: rgba(230, 234, 241, .20); --md-line-field: #737F95;
    --md-shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 22px -18px rgba(0, 0, 0, .70);
    --md-shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .75);
    --md-shadow-3: 0 4px 12px rgba(0, 0, 0, .40), 0 28px 60px -34px rgba(0, 0, 0, .85);
  }
}

/* ==========================================================================
   Farbschema der Browser-Elemente (Bildlaufleisten, Formularfelder, Autofill)
   Nur im md-Bereich. Auf :root würde die Systemeinstellung „dunkel" mit dem
   Einbinden dieser Datei auch alle alten Bildschirme umfärben, denn die kennen
   nur data-ads-theme. .md-root ist <body> oder ein Container, nie <html>:
   dessen font-size verschöbe alle rem-Werte des Kits. data-theme steht am <html>.
   ========================================================================== */
.md-root { color-scheme: light; }
:root[data-theme="dark"] .md-root { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .md-root { color-scheme: dark; }
}