/* Hypnosolve Design Tokens
 * Quelle: Clients/Hypnosolve/brand/Hypnosolve - Brand.md
 * Aus existierenden CSS-Variablen der alten Site übernommen, konsolidiert.
 */

:root {
  /* Sage-Palette */
  --primary-color: #A6BDB2;
  --green: #6B8277;
  --basic-green: #92a184;

  /* Honey-Akzent */
  --accent-color: #F4C176;
  --accent-hover: #e9b56c;

  /* Neutrale */
  --secondary-color: #F8F7F4;
  --text-color: #333333;
  --light-text: #A6BDB2;
  --soft-shade: #e6edea;
  --white: #ffffff;

  /* Typografie */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Schriftgrössen (Mobile-first, fluid via clamp) */
  --fs-h1: clamp(2rem, 4vw + 1rem, 3rem);
  --fs-h2: clamp(1.5rem, 2vw + 1rem, 2rem);
  --fs-h3: clamp(1.2rem, 1.5vw + 0.8rem, 1.4rem);
  --fs-body: 1rem;
  --fs-lead: 1.1rem;
  --fs-small: 0.9rem;

  /* Line-Heights */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* Spacing-Skala */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;

  /* Radien */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Schatten (sage-getönt, nie schwarz) */
  --shadow-soft: 0 8px 32px rgba(166, 189, 178, 0.14);
  --shadow-soft-honey: 0 8px 32px rgba(166, 189, 178, 0.14), 0 1.5px 0 var(--accent-color);
  --shadow-card: 0 2px 12px rgba(166, 189, 178, 0.08);

  /* Container */
  --container-max: 1200px;
  --container-padding-x: clamp(1rem, 4vw, 2rem);

  /* Transitions */
  --transition-base: 200ms ease-out;
  --transition-slow: 400ms ease-out;

  /* Hero-Overlay */
  --hero-overlay: linear-gradient(180deg, rgba(166, 189, 178, 0.40) 40%, rgba(248, 247, 244, 0.2) 100%);

  /* Section-Gradients */
  --bg-fleet-down: linear-gradient(180deg, #f8f7f4 60%, #e6edea 100%);
  --bg-fleet-up: linear-gradient(180deg, #e6edea 80%, #f8f7f4 100%);
}

/* Prefers-reduced-motion: User-Wunsch respektieren */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}