/* ===========================================================================
   MIRACLEAN Austria – Design-Tokens
   ---------------------------------------------------------------------------
   Alle Farben, Abstaende und Schriftgroessen an genau einer Stelle.
   Die Markenfarben wurden pixelgenau aus dem Logo und den Instagram-Motiven
   ausgelesen: tiefes Navy als Basis, das Logo-Gelb als Signalfarbe.

   WICHTIG: --signal (Gelb) hat auf Weiss nur ~1.2:1 Kontrast und wird
   deshalb NIEMALS als Textfarbe auf hellem Grund verwendet – nur als
   Flaeche mit dunkler Schrift, als Unterstreichung oder als Akzentlinie.
   =========================================================================== */

:root {
  /* --- Marke ------------------------------------------------------------- */
  --navy-deep:   #030a17;   /* Hero-Grund, Footer                            */
  --navy:        #071836;   /* Header, dunkle Sektionen                      */
  --navy-soft:   #0d2450;   /* Karten auf dunklem Grund                      */
  --navy-line:   #14294d;   /* Trennlinien auf navy                          */
  --signal:      #fde703;   /* Logo-Gelb                                     */
  --signal-dark: #d4c003;   /* Hover-Zustand des Gelbs                       */

  /* --- Neutral ----------------------------------------------------------- */
  --paper:       #ffffff;
  --mist:        #f4f6f9;   /* helle Sektionsflaeche                         */
  --ink:         #111820;   /* Fliesstext auf hell                           */
  --ink-muted:   #56616f;   /* Sekundaertext                                 */
  --line:        #dfe5ed;   /* Trennlinien auf hell                          */

  /* --- Statusfarben ------------------------------------------------------ */
  --ok:          #1c7d4d;
  --error:       #c0392b;
  --error-soft:  #fdecea;

  /* --- Typografie -------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;

  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-base: 1.0625rem;   /* 17px */
  --fs-lg:   1.1875rem;   /* 19px */
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.5rem;

  --lh-tight: 1.06;
  --lh-head:  1.15;
  --lh-body:  1.65;

  /* --- Raster & Abstaende ------------------------------------------------ */
  --container: 1180px;
  --gutter:    16px;        /* Mindest-Seitenabstand auf dem Telefon         */

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* --- Form -------------------------------------------------------------- */
  --radius:    4px;
  --radius-lg: 8px;
  --shadow:    0 1px 2px rgba(3, 10, 23, .06), 0 8px 24px rgba(3, 10, 23, .07);
  --shadow-lg: 0 2px 4px rgba(3, 10, 23, .08), 0 20px 48px rgba(3, 10, 23, .14);

  /* --- Interaktion ------------------------------------------------------- */
  --tap:        44px;       /* Mindestgroesse fuer Touch-Ziele               */
  --transition: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}