/*
 * Datei: assets/styles/tokens.css
 * Zweck: Globale Tokenquelle.
 * Domäne: Design-Tokens.
 * Status: führend
 * Darf definieren: Farben, Metriken, Radien, Fokus, Touch-Ziele und zentrale Systemvariablen.
 * Darf nicht definieren: Komponenten, Seitenlayout oder Bereichssonderregeln.
 */
/* AP-29D-REV10 | 2026-05-03 | Zweck: zentrale Font-Strategie für Brand und UI; Tektur ausschließlich als Wortmarken-Schrift, Material Symbols Rounded zentral statt HTML-Mehrfachlinks. | Owner: assets/styles/tokens.css */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,1,0&family=Tektur:wght@500&display=swap");


/* AP-29D-REV2 | 2026-05-01 | Zweck: Ownership-Lock bestätigt; neue oder geänderte Grundkomponenten nur in der führenden Domänendatei. | Owner: assets/styles/tokens.css */
:root {
  --surface2: var(--surface-2, var(--surface, #1b1f27));
  --surface3: var(--surface-3, var(--surface2, var(--surface, #232935)));
  --text-soft: var(--text-muted, var(--text-secondary, #b5bcc8));
  --text2: var(--text-secondary, var(--text-soft, #b5bcc8));
  /* AP-29D-REV10 | 2026-05-03 | Zweck: Brand-Schrift und neutrale UI-Schrift als getrennte zentrale Tokens. | Owner: assets/styles/tokens.css */
  --font-brand: "Tektur", "Inter", "Roboto Flex", system-ui, sans-serif;
  --font-ui: "Inter", "Roboto Flex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-mark-size-desktop: 34px;
  --brand-mark-size-mobile: 28px;
  --brand-wordmark-size-desktop: 30px;
  --brand-wordmark-size-mobile: 24px;
  --brand-lockup-gap-desktop: 12px;
  --brand-lockup-gap-mobile: 10px;

  --bg:#0d1015;
  --surface:#151a24;
  --surface-2:#1b2130;
  --surface-3:#22293b;
  --line:#2b3348;
  --text:#f4f7fd;
  --muted:#a8b0c4;
  --brand:#9db4ff;
  --panel:var(--surface);
  --panel2:var(--surface-2);
  --accent:var(--brand);
  --track:var(--surface-3);
  --danger:#ff6e89;
  --good:#92d5a6;
  --ok:var(--good);
  --bad:var(--danger);
  --shadow:0 16px 36px rgba(0,0,0,.34);
  --radius-s:14px;
  --radius-m:18px;
  --radius-l:20px;
  --radius-xl:28px;
  --header-pad:14px;
  --section-pad:12px;
  --touch:44px;
}


/* AP-29C Material-3 Shell Tokens
   Zweck: zentrale Metriken für Rail, Buttons, Chips, Badges, Dialoge und Fokus.
   Keine Bereichsdatei darf eigene Grundmetriken daneben erfinden. */
:root {
  --m3-space-0: 0;
  --m3-space-1: 0.25rem;
  --m3-space-2: 0.5rem;
  --m3-space-3: 0.75rem;
  --m3-space-4: 1rem;
  --m3-space-5: 1.25rem;
  --m3-space-6: 1.5rem;
  --m3-space-8: 2rem;
  --m3-layout-gutter: clamp(1rem, 2.5vw, 2rem);
  --m3-content-max: 90rem;
  --m3-nav-rail-width: 6rem;
  --m3-nav-rail-compact-width: 6rem;
  --m3-nav-rail-item-height: 3.5rem;
  --m3-button-height: 2.75rem;
  --m3-icon-button-size: 3rem;
  --m3-field-height: 3.25rem;
  --m3-chip-height: 2.25rem;
  --m3-badge-height: 1.75rem;
  --m3-icon-size: 1.5rem;
  --m3-radius-xs: 0.5rem;
  --m3-radius-sm: 0.75rem;
  --m3-radius-md: 1rem;
  --m3-radius-lg: 1.5rem;
  --m3-radius-xl: 2rem;
  --m3-card-radius: var(--m3-radius-lg);
  --m3-dialog-radius: var(--m3-radius-xl);
  --m3-touch-target: 3rem;
  --m3-focus-ring: 0 0 0 3px rgba(157, 179, 255, 0.42);
  --m3-motion-fast: 160ms;
  --m3-motion-standard: 220ms;
}
/* AP-29D-REV2 | 2026-05-01 | Zweck: Material-Symbol-Klasse aus Tokens entfernt; Tokens definieren nur Variablen, Komponenten führen Icon-Klassen. | Owner: assets/styles/tokens.css */


/* AP-29D-REV3 | 2026-05-01 | Zweck: Mitarbeiter-Desktopmetriken für kompakte rechte Rail, arbeitsflächenzentriertes Suchdock und begrenzte Detailbilder. | Owner: assets/styles/tokens.css */
:root {
  --employee-rail-desktop-width: 6rem;
  --employee-desktop-gutter: clamp(1rem, 1.8vw, 1.75rem);
  --employee-search-dock-width: 41rem;
  --employee-detail-max-width: 96rem;
  --employee-detail-image-max-height: min(52dvh, 32rem);
  --employee-detail-image-max-width: 50%;
  --employee-detail-column-gap: clamp(0.875rem, 1.4vw, 1.35rem);
  --employee-detail-bottom-space: 2rem;
}

/* AP-29D-FINAL | 2026-05-03 | Zweck: finaler Rail-Vertrag; eine rechte Rail mit 96px Breite für Mitarbeiter und Admin. | Owner: assets/styles/tokens.css */
:root {
  --ap29d-final-rail-width: var(--zm-rail-width, 96px);
}

/* AP-29D-FINAL | 2026-05-03 | Zweck: Admin-Flächenmetriken als zentrale Tokens, keine Bereichsgrundmetriken. | Owner: assets/styles/tokens.css */
:root {
  --admin27-rail-width: var(--ap29d-final-rail-width, 6rem);
  --admin27-page-width: var(--m3-content-max, 90rem);
  --admin27-gap: var(--m3-layout-gutter, 1.5rem);
}


/* AP-29D-REV8 | 2026-05-03 | Zweck: zentrale REV8-Metriken für Rail, Buttons, Bilder, Dialoge, Karten, Chips und Suchdock; Bereichsdateien dürfen keine freien Grundmaße setzen. | Owner: assets/styles/tokens.css */
:root {
  --zm-rail-width: 96px;
  --zm-rail-item-size: 72px;
  --zm-rail-icon-size: 24px;
  --zm-search-height: 56px;
  --zm-search-width-desktop: 640px;
  --zm-search-bottom-desktop: 24px;
  --zm-search-bottom-mobile: 16px;
  --zm-dialog-width-view: 960px;
  --zm-dialog-width-edit: 1040px;
  --zm-dialog-max-height: calc(100vh - 96px);
  --zm-card-radius: 24px;
  --zm-card-padding: 24px;
  --zm-chip-height: 32px;
  --zm-badge-height: 28px;
  --zm-grid-gap: 24px;
  --zm-content-padding: 24px;
  --zm-drink-image-max-height-desktop: 52vh;
  --zm-drink-image-max-height-mobile: 42vh;

  --m3-nav-rail-width: var(--zm-rail-width);
  --m3-nav-rail-compact-width: var(--zm-rail-width);
  --m3-nav-rail-item-height: var(--zm-rail-item-size);
  --m3-icon-size: var(--zm-rail-icon-size);
  --m3-button-height: 44px;
  --m3-icon-button-size: 48px;
  --m3-chip-height: var(--zm-chip-height);
  --m3-badge-height: var(--zm-badge-height);
  --m3-card-radius: var(--zm-card-radius);
  --m3-dialog-radius: var(--zm-card-radius);
  --m3-layout-gutter: var(--zm-content-padding);
  --employee-rail-desktop-width: var(--zm-rail-width);
  --employee-search-dock-width: var(--zm-search-width-desktop);
  --employee-desktop-gutter: var(--zm-content-padding);
  --employee-detail-bottom-space: 2rem;
  --employee-image-max-height: var(--zm-drink-image-max-height-desktop);
  --ap29d-final-rail-width: var(--zm-rail-width);
  --admin27-rail-width: var(--zm-rail-width);
  --admin27-gap: var(--zm-content-padding);
}

/* AP-29D-REV8 | 2026-05-03 | Zweck: REV8-Maßvertrag für Rail, Suche, Dialoge, Cards, Chips, Badges und Drinkbilder; Owner: assets/styles/tokens.css */
:root {
  --zm-rail-width: 96px;
  --zm-rail-item-size: 72px;
  --zm-rail-icon-size: 24px;
  --zm-search-height: 56px;
  --zm-search-width-desktop: 640px;
  --zm-search-bottom-desktop: 24px;
  --zm-search-bottom-mobile: 16px;
  --zm-dialog-width-view: 960px;
  --zm-dialog-width-edit: 1040px;
  --zm-dialog-max-height: calc(100vh - 96px);
  --zm-card-radius: 24px;
  --zm-card-padding: 24px;
  --zm-chip-height: 32px;
  --zm-badge-height: 28px;
  --zm-grid-gap: 24px;
  --zm-content-padding: 24px;
  --zm-drink-image-max-height-desktop: 52vh;
  --zm-drink-image-max-height-mobile: 42vh;

  --m3-nav-rail-width: var(--zm-rail-width);
  --m3-nav-rail-compact-width: var(--zm-rail-width);
  --m3-nav-rail-item-height: var(--zm-rail-item-size);
  --m3-icon-size: var(--zm-rail-icon-size);
  --m3-button-height: var(--zm-search-height);
  --m3-chip-height: var(--zm-chip-height);
  --m3-badge-height: var(--zm-badge-height);
  --m3-card-radius: var(--zm-card-radius);
  --m3-layout-gutter: var(--zm-content-padding);
  --employee-rail-desktop-width: var(--zm-rail-width);
  --employee-search-dock-width: var(--zm-search-width-desktop);
  --employee-detail-image-max-height: var(--zm-drink-image-max-height-desktop);
  --employee-detail-image-max-width: 50%;
  --employee-detail-column-gap: var(--zm-grid-gap);
  --employee-detail-bottom-space: calc(var(--zm-search-height) + var(--zm-search-bottom-desktop) + 24px);
  --ap29d-final-rail-width: var(--zm-rail-width);
  --admin27-rail-width: var(--zm-rail-width);
  --admin27-gap: var(--zm-content-padding);
}