/* leadity-Bibliothek · Open Design Package v1
 *
 * Kanonische portable Bindeschicht für das Shared-Token-Schema aus
 * Open Design v0.16.1. Die vollständige Leadity-Foundation bleibt unter
 * tokens/colors_and_type.css erhalten und wird hier als Extension-Layer
 * inklusive der lokalen Fontdateien geladen.
 *
 * Diese :root-Deklaration enthält alle 56 Shared Slots. Werte werden nur
 * aus bestätigten Leadity-Rollen gebunden. Wo Open Design eine zusätzliche
 * Stufe vorsieht, die Leadity nicht unterscheidet, wird auf die nächste
 * bestehende Leadity-Rolle aliasiert statt ein neuer Produkttoken erfunden.
 */

@import url("./tokens/colors_and_type.css");

:root {
  /* Surface */
  --bg: #f0f5f5;
  --surface: #ffffff;
  --surface-warm: var(--bg);

  /* Foreground */
  --fg: #05323c;
  --fg-2: #325a5f;
  --muted: #829ba0;
  --meta: var(--muted);

  /* Border */
  --border: #cbd9da;
  --border-soft: #dce7e7;

  /* Operative UI-Primary; die grünen/orangefarbenen Brand-Tokens bleiben
     bewusst außerhalb der allgemeinen Aktionsrolle. */
  --accent: #325a5f;
  --accent-on: #ffffff;
  --accent-hover: #05323c;
  --accent-active: #01181d;

  /* Semantische Textrollen für Statuskommunikation */
  --success: #1d8b6a;
  --warn: #f4a100;
  --danger: #bc194a;

  /* Fonts */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;
  --font-mono: ui-monospace, "Roboto Mono", monospace;

  /* Typografieskala. Leadity besitzt keinen Hero-Stil oberhalb display-lg;
     deshalb kollabiert text-4xl bewusst auf die bestätigte Displaydecke. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 25px;
  --text-3xl: 30px;
  --text-4xl: var(--text-3xl);
  --leading-body: 1.5;
  --leading-tight: 1.3;
  --tracking-display: 0.1px;

  /* Portables Basisspacing. Der Open-Design-Slot space-5 (20 px) wird auf
     Leadity s5 (16 px) kollabiert; 20 px ist kein zulässiger Leadity-Abstand. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: var(--space-4);
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Section-Rhythmus */
  --section-y-desktop: 32px;
  --section-y-tablet: 24px;
  --section-y-phone: 16px;

  /* Radien */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Elevation und Fokus */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 2px 15px 0 #313c5405;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Ruhige, barrierefreie UI-Bewegung */
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);

  /* Layout */
  --container-max: 1800px;
  --container-gutter-desktop: 32px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
}