/* ==========================================================================
   tokens.css — Design-Tokens · Omnibus Schönfelder
   Farben 1:1 aus dem Original-CSS der bestehenden Website (styles/desktop.css).
   Voyager-Clean-Palette: helle Flächen, Schönfelder-Blautöne, kein Gold.
   ========================================================================== */

:root {
  /* --- Marke & Farben (Original Schönfelder) --- */
  --color-brand:        #1B396C;  /* Dunkelblau — Nav-Links, Footer, CTA-Button */
  --color-brand-mid:    #2C58A0;  /* Mittelblau — Headlines, Akzente, Card-Border */
  --color-brand-light:  #ACB9CE;  /* Hellblau-Grau — Sekundärtext, Tags, Linien */
  --color-brand-deep:   #142C54;  /* dezente Footer-Tiefe (NICHT als Content-BG) */

  /* Kompatibilität: bestehende var(--color-accent)-Referenzen → Mid-Blau */
  --color-accent:       #2C58A0;
  --color-accent-hover: #1B396C;

  --color-bg:           #f4f6fa;  /* Seitenhintergrund — leicht blau-getönt */
  --color-surface:      #ffffff;  /* Cards, Content */
  --color-surface-2:    #eef1f7;  /* dezente Tiefenstaffelung */
  --color-text:         #626B75;  /* Fließtext */
  --color-text-muted:   #707885;  /* Nav-Links, Labels */
  --color-text-inverse: #ffffff;  /* Text auf dunklem Footer */
  --color-success:      #2d7a3a;
  --color-error:        #c0392b;
  --color-gold:         #c9a227;  /* AUSNAHME: nur für Bewertungs-Sterne (Social Proof) */

  --color-border:       rgba(172,185,206,0.5);  /* Voyager-Card-Border (#ACB9CE 50%) */

  /* --- Schatten (blau getönt, dezent) --- */
  --shadow-sm:    0 1px 3px rgba(27,57,108,0.10);
  --shadow-md:    0 6px 20px rgba(27,57,108,0.10);
  --shadow-lg:    0 16px 48px rgba(27,57,108,0.14);
  --shadow-brand: 0 10px 30px rgba(27,57,108,0.22);

  /* --- Typografie --- */
  --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;

  /* --- Fluid Type Scale (Editorial) --- */
  --text-xs:      clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:      clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base:    clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:      clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:      clamp(1.5rem,   1.2rem  + 1.5vw,  2.5rem);
  --text-2xl:     clamp(2.25rem,  1.2rem  + 3vw,    4.25rem);
  --text-hero:    clamp(2.75rem,  1rem    + 6.5vw,  6.5rem);
  --text-display: clamp(4rem,     1rem    + 12vw,  11rem);  /* nur für editoriale Momente */

  /* --- Spacing (4px-Basis) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* --- Radien (Voyager: großzügig abgerundet) --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  /* --- Layout --- */
  --container:      1240px;
  --container-sm:   960px;
  --container-wide: 1560px;
  /* Fluider Außenabstand: skaliert proportional mit dem Viewport (zoom-stabil) */
  --gutter:         clamp(1.25rem, 4vw, 3.5rem);
  --nav-height:     76px;

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.2s;
  --dur-base:   0.3s;
  --dur-slow:   0.6s;
}