/**
 * tokens.css — Design Tokens (Single Source of Truth).
 *
 * Dunkles Blau-Farbschema. Alle Werte in der App MÜSSEN über diese
 * Custom Properties verwendet werden — keine hardcoded Farben/Spacing
 * irgendwo sonst. Damit bleibt das Design durchgängig konsistent.
 *
 * @author PWA Assistant
 * @since  2026-04-08
 */

:root {
  /* === Farben: Dunkles Blau-Schema === */
  /* Hintergrund-Schichten (dunkel → heller) */
  --color-bg-0: #070B18;          /* tiefster Hintergrund */
  --color-bg-1: #0B1224;          /* Body */
  --color-bg-2: #111A33;          /* Sidebar, App-Shell */
  --color-bg-3: #172340;          /* Cards, Panels */
  --color-bg-4: #1E2C4F;          /* Elevated: Modal, Hover-Fläche */

  /* Oberflächen-Varianten mit korrektem Hex */
  --color-surface:        #172340;
  --color-surface-hover:  #1E2C4F;
  --color-surface-active: #243461;

  /* Rahmen / Trenner */
  --color-border:         #243461;
  --color-border-strong:  #35508A;

  /* Text */
  --color-text:           #E6ECF7;  /* primär */
  --color-text-muted:     #9AA8C7;  /* sekundär */
  --color-text-subtle:    #6A7A9E;  /* tertiär / placeholder */
  --color-text-inverse:   #0B1224;

  /* Akzent — helles Himmelblau als einziger Akzent */
  --color-accent:          #4FA8FF;
  --color-accent-hover:    #6DBAFF;
  --color-accent-active:   #3896F0;
  --color-accent-soft:     rgba(79, 168, 255, 0.12);
  --color-accent-contrast: #041024;

  /* Semantik */
  --color-success: #3FD18C;
  --color-warning: #F2B84B;
  --color-error:   #FF6B7A;
  --color-info:    #4FA8FF;

  --color-success-soft: rgba(63, 209, 140, 0.12);
  --color-warning-soft: rgba(242, 184, 75, 0.12);
  --color-error-soft:   rgba(255, 107, 122, 0.12);

  /* Fokus-Ring */
  --focus-ring: 0 0 0 3px rgba(79, 168, 255, 0.45);

  /* === Typografie === */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --fs-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem,     0.96rem + 0.2vw,  1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1.3rem + 0.4vw,   1.625rem);
  --fs-2xl:  clamp(1.75rem,  1.6rem + 0.75vw,  2.25rem);
  --fs-3xl:  clamp(2.25rem,  2rem + 1.25vw,    3rem);

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

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

  /* === Spacing (4px Basis-Raster) === */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* === Radii === */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.55);

  /* === Transitions === */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === Layout === */
  --sidebar-width: 260px;
  --header-height: 64px;
  --container-max: 1200px;
  --z-sticky:  100;
  --z-modal:   1000;
  --z-toast:   2000;
}