/* =========================================================
   tokens.css – Nur CSS Custom Properties
   Keine Regeln, keine Klassen – ausschließlich Tokens
   ========================================================= */

:root {

  /* Farben */
  --color-primary:         #C41414;
  --color-primary-hover:   #A01010;
  --color-primary-light:   #FFEAEA;
  --color-primary-soft:    rgba(196, 20, 20, 0.08);

  /* Akzentfarbe – Gold/Amber fuer Trust-Elemente */
  --color-accent:          #D97706;

  --color-dark:            #0F172A;

  --color-foreground:      #0F172A;
  --color-foreground-subtle:#94A3B8;

  --color-background:      #FFFFFF;
  --color-surface:         #F0F2F6;
  --color-surface-2:       #E8EBF0;

  --color-border:          #E2E8F0;
  --color-border-dark:     #CBD5E1;

  --color-white:           #FFFFFF;

  /* Erfolgs- und Sicherheitsfarbe */
  --color-success:         #059669;
  --color-success-light:   #ECFDF5;

  /* Schrift */
  --font-family-base:      'Jost', system-ui, -apple-system, sans-serif;
  --font-family-heading:   'Montserrat', system-ui, -apple-system, sans-serif;

  --font-size-xs:          0.833rem;   /* 15px */
  --font-size-base:        1.0625rem;  /* 17px */
  --font-size-lg:          1.25rem;    /* 20px */
  --font-size-xl:          1.5rem;     /* 24px */
  --font-size-2xl:         1.75rem;    /* 28px */
  --font-size-3xl:         2.125rem;   /* 34px */
  --font-size-4xl:         2.625rem;   /* 42px */
  --font-size-5xl:         3.375rem;   /* 54px */

  --line-height-tight:     1.2;
  --line-height-snug:      1.375;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.7;

  /* Abstände */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  --section-padding:       112px;

  /* Container */
  --container-max:         1320px;
  --container-padding:     24px;

  /* Radius – Maximum 8px */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  8px;

  /* Schatten */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.06);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:   0 10px 25px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl:   0 20px 40px -6px rgb(0 0 0 / 0.10), 0 8px 12px -6px rgb(0 0 0 / 0.04);
  --shadow-2xl:  0 32px 64px -12px rgb(0 0 0 / 0.14);

  /* Farbige Schatten */
  --shadow-primary:  0 8px 24px -4px rgb(196 20 20 / 0.25);
  --shadow-card-hover: 0 16px 32px -4px rgb(0 0 0 / 0.10), 0 6px 12px -4px rgb(0 0 0 / 0.05);

  /* Übergänge */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);

  /* Header-Höhe (für Hero-Offset) */
  --topbar-height:  48px;
  --header-height:  96px;
  --header-total:   144px; /* topbar + header */
}