/* ============================================================
   Design Tokens · betreuer.pro
   Farben aus dem Logo: Limettengrün + warmes Grau
   Grundlage: docs/design-system.md
   ============================================================ */

:root {
  /* ─── Farben ─────────────────────────────────────────────── */
  --color-green-500: #9BC83A;
  --color-green-600: #85B02B;
  --color-green-700: #6F9425;
  --color-green-100: #E9F3D0;

  --color-grey-900: #2A2A2A;
  --color-grey-700: #4A4A4A;
  --color-grey-500: #7A7A7A;
  --color-grey-300: #BFBFBF;
  --color-grey-200: #DCDCDC;
  --color-grey-100: #F2F2F2;
  --color-grey-50:  #F8F8F8;
  --color-white:    #FFFFFF;

  /* semantisch */
  --color-status-open:    #6F9425;
  --color-status-limited: #C78A1F;
  --color-status-closed:  #7A7A7A;
  --color-info:           #3B6FA0;
  --color-info-soft:      #EDF2F8;
  --color-danger:         #B02A2A;
  --color-danger-soft:    #F7E7E7;

  /* Fläche */
  --bg-body:     var(--color-white);
  --bg-soft:     var(--color-grey-50);
  --bg-section:  var(--color-grey-100);
  --bg-track-b:  var(--color-green-100);

  /* Text */
  --text-default:  var(--color-grey-900);
  --text-muted:    var(--color-grey-700);
  --text-faint:    var(--color-grey-500);
  --text-inverse:  var(--color-white);
  --link:          var(--color-green-700);
  --link-hover:    var(--color-green-600);

  /* Linien */
  --line:           var(--color-grey-200);
  --line-strong:    var(--color-grey-300);

  /* ─── Typografie ─────────────────────────────────────────── */
  --font-sans: "Atkinson Hyperlegible", "Inter", system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Skala (mobile-first; Desktop-Override im Component-CSS per media-query) */
  --text-xs:   0.8125rem;  /* 13px */
  --text-sm:   0.9375rem;  /* 15px */
  --text-base: 1.0625rem;  /* 17px */
  --text-lg:   1.1875rem;  /* 19px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.625rem;   /* 26px */
  --text-3xl:  1.875rem;   /* 30px */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

  /* ─── Abstände (4-er Raster) ─────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ─── Layout ─────────────────────────────────────────────── */
  --max-content: 75rem;   /* 1200px */
  --max-reading: 50rem;   /* 800px — komfortable Lesebreite für Prosa */
  --max-prose: 60ch;      /* ~50rem — für eingebettete Fließtext-Spalten */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ─── Schatten ───────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(42, 42, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(42, 42, 42, 0.08);
  --shadow-md: 0 6px 16px rgba(42, 42, 42, 0.10);

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
}

/* Desktop-Anhebung der Basisgrößen */
@media (min-width: 768px) {
  :root {
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  1.875rem;   /* 30px */
    --text-3xl:  2.375rem;   /* 38px */
  }
}

/* Reduced-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}