/* =========================================================
   HUNDETRAINER MIT HERZ
   DESIGN TOKENS
   Zentrale technische Grundlage des Designsystems
   ========================================================= */

:root {

  /* =======================================================
     TYPOGRAFIE
     ======================================================= */

  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-accent: "Caveat", cursive;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-body: 1rem;

  --font-size-h1: clamp(2.5rem, 5vw, 4.5rem);
  --font-size-h2: clamp(2rem, 3.5vw, 3rem);
  --font-size-h3: clamp(1.5rem, 2.5vw, 2rem);

  --line-height-body: 1.65;
  --line-height-h1: 1.08;
  --line-height-h2: 1.15;
  --line-height-h3: 1.25;

  --text-width: 68ch;

  /* =======================================================
     FARBEN – KERNFARBEN
     ======================================================= */

  --color-brand-deep: #243746;
  --color-brand-primary: #38566D;
  --color-brand-medium: #58768C;
  --color-brand-light: #D9E4E9;


  /* =======================================================
     AKZENTFARBE
     ======================================================= */

  --color-accent: #168C8C;

/* Weiterführende Handlung:
   Orangeton wird nach finaler HEX-Freigabe ergänzt.
   --color-action-next: ...;
*/


  /* =======================================================
     NEUTRALFARBEN
     ======================================================= */

  --color-surface: #F7F5F1;
  --color-surface-white: #FFFFFF;

  --color-text: #1D2A33;
  --color-text-light: #F7FAFB;


  /* =======================================================
     KONTAKTFARBEN
     ======================================================= */

  --color-whatsapp: #25D366;


  /* =======================================================
     STATUSFARBEN
     ======================================================= */

  --color-success: #2E7D5B;
  --color-warning: #A66A18;
  --color-error: #B54242;


  /* =======================================================
     FARBVERLÄUFE
     ======================================================= */

  --gradient-brand:
    linear-gradient(
      180deg,
      #243746 0%,
      #38566D 45%,
      #58768C 100%
    );

  --gradient-brand-light:
    linear-gradient(
      180deg,
      #58768C 0%,
      #D9E4E9 100%
    );


  /* =======================================================
     ABSTANDSSYSTEM
     Basiseinheit: 4px
     ======================================================= */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */


  /* =======================================================
     RESPONSIVE ABSTÄNDE
     ======================================================= */

  --section-space:
    clamp(4rem, 8vw, 7rem);

  --section-space-compact:
    clamp(2.5rem, 5vw, 4rem);

  --component-padding:
    clamp(1.5rem, 3vw, 2rem);

  --grid-gap:
    clamp(1.5rem, 3vw, 2rem);


  /* =======================================================
     ECKENRADIEN
     ======================================================= */

  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-round: 9999px;


  /* =======================================================
     SCHATTEN
     ======================================================= */

  --shadow-sm:
    0 2px 8px rgba(29, 42, 51, 0.08);

  --shadow-md:
    0 6px 20px rgba(29, 42, 51, 0.12);

  --shadow-lg:
    0 12px 32px rgba(29, 42, 51, 0.16);


  /* =======================================================
     BEWEGUNG UND INTERAKTION
     ======================================================= */

  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  --ease-standard: ease-out;

  --lift-interactive: -3px;


  /* =======================================================
     BREAKPOINTS
     Dokumentationswerte
     Hinweis:
     CSS Custom Properties können nicht direkt
     in normalen Media Queries verwendet werden.
     ======================================================= */

  --breakpoint-sm: 36rem;   /* 576px */
  --breakpoint-md: 48rem;   /* 768px */
  --breakpoint-lg: 64rem;   /* 1024px */
  --breakpoint-xl: 80rem;   /* 1280px */

}