/* ============================================================
   WEBAMBOSS — Design Tokens
   Farben, Typografie-Skala, Abstände, Radien, Übergänge
   ============================================================ */

:root {
  /* --- Hintergründe --- */
  --bg-page:        #1E2127;
  --bg-alt:         #23272E;
  --bg-card:        #262A31;
  --bg-cta:         #191D26;
  --bg-footer:      #15171C;

  /* --- Linien --- */
  --border:         #34383F;

  /* --- Text --- */
  --text-headline:  #F4F1EA;
  --text-body:      #C7CACF;
  --text-muted:     #A9ADB4;
  --text-faint:     #7E828A;

  /* --- Akzent --- */
  --accent:         #4F9BE0;
  --accent-on:      #0E2238;   /* Text auf Akzent-Button */
  --brand-dark:     #23272E;
  --brand-blue:     #20446E;

  /* --- Typografie --- */
  --font-headline:  'Unbounded', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-logo:      'Archivo', sans-serif;

  /* Fluid-Skala (clamp: min → max) */
  --text-h1:   clamp(1.75rem, 4vw, 2.75rem);   /* ~28→44px */
  --text-h2:   clamp(1.375rem, 3vw, 2.125rem); /* ~22→34px */
  --text-h3:   clamp(1.125rem, 2vw, 1.5rem);
  --text-h4:   clamp(1rem, 1.5vw, 1.25rem);
  --text-base: clamp(1rem, 1.2vw, 1.0625rem);  /* ~16→17px */
  --text-sm:   0.8125rem;                       /* 13px */

  /* --- Abstände --- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  9rem;

  /* --- Radien --- */
  --radius-sm:  0.375rem;
  --radius-md:  0.75rem;
  --radius-lg:  1.25rem;
  --radius-pill: 999px;

  /* --- Übergänge --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- Schatten --- */
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.35);
  --shadow-btn:  0 4px 20px rgba(79, 155, 224, 0.25);

  /* --- Container --- */
  --container-max: 1160px;
  --container-px:  clamp(1.25rem, 5vw, 2.5rem);
}