/* ============================================================
   DESIGN TOKENS
   Platzhalter-Werte — werden aus dem Figma-Design überschrieben
   (Farben, Typo, Spacing via get_variable_defs).
   ============================================================ */

:root {
  /* --- Farben --- */
  --color-bg: #0000ff;                         /* Blau */
  --color-text: #deffff;                        /* Hell-Cyan */
  --color-surface: rgba(222, 255, 255, 0.08);   /* dezente Panels auf Blau */
  --color-text-muted: rgba(222, 255, 255, 0.65);
  --color-accent: #deffff;                      /* helle Buttons mit blauer Schrift */
  --color-border: rgba(222, 255, 255, 0.22);

  /* --- Typografie --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Fluide Schriftgrößen (min .. max), skalieren mit der Viewport-Breite */
  --fs-100: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-200: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --fs-300: clamp(1rem, 0.93rem + 0.35vw, 1.25rem);
  --fs-400: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --fs-500: clamp(1.75rem, 1.4rem + 1.75vw, 3rem);
  --fs-600: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);

  --lh-tight: 1.1;
  --lh-base: 1.6;

  /* --- Abstände (Spacing-Skala) --- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 4rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);        /* kräftiges ease-out (Enter/Exit) */
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);  /* kräftiges ease-in-out (Bewegung auf dem Screen) */
  --dur-fast: 160ms;
  --dur-base: 320ms;
}

/* Breakpoints (zur Referenz — in Media Queries verwendet):
   Mobile   ≤ 640px
   Tablet   641–1024px
   Desktop  ≥ 1025px
*/