/* ============================================================
   01-TOKENS.CSS
   Design-Tokens für pflege.cloud
   ------------------------------------------------------------
   Diese Datei enthält alle zentralen Design-Werte als
   CSS Custom Properties (Variablen). Alle weiteren Module
   referenzieren ausschließlich diese Variablen.

   WICHTIG: Bei einem neuen Kunden wird im Idealfall NUR
   diese Datei ausgetauscht — die Architektur bleibt gleich.

   Quelle: Corporate Design Manual pflege.cloud
   Stand:  Juni 2026
   ============================================================ */


/* ============================================================
   SCHRIFT — DM Sans (selbst gehostet, DSGVO-konform)
   ------------------------------------------------------------
   TODO: Schriftdateien herunterladen und unter
         assets/fonts/dm-sans/ ablegen. Bezugsquelle:
         https://gwfh.mranftl.com/fonts/dm-sans (google-webfonts-helper)
         Benötigte Schnitte: 400 (regular), 500 (medium), 700 (bold).
         Dateinamen müssen zu den src-Pfaden unten passen.
   ============================================================ */

/* dm-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-sans/dm-sans-v17-latin-regular.woff2') format('woff2');
}
/* dm-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/dm-sans/dm-sans-v17-latin-500.woff2') format('woff2');
}
/* dm-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/dm-sans/dm-sans-v17-latin-700.woff2') format('woff2');
}

:root {

    /* ────────────────────────────────────────────────────────
       FARBEN
       ────────────────────────────────────────────────────────
       Marken-Palette laut CD-Manual pflege.cloud:
         Koral-Rot  #FF5757  — Aktionsfarbe (Buttons, CTA, Logo-Herz)
         Navy       #004266  — Headlines, Text, Logo-Wolke
         Gold       #FFBD59  — Akzent (Eyebrows, Card-Borders, dosiert)
       ────────────────────────────────────────────────────────  */

    /* — Primär / Aktionsfarbe (Koral) —————————————————————— */
    --cd-color-primary:           #FF5757;  /* Koral-Rot — Buttons, CTA, Links */
    --cd-color-primary-soft:      #E84545;  /* Dunkleres Koral — Hover (bessere Kontrastwerte) */
    --cd-color-primary-tint:      rgba(255, 87, 87, 0.08);  /* Koral 8 % — Hintergrundflächen */

    /* — Foundation (Navy trägt Text & Headlines) ——————————— */
    --cd-color-text:              #004266;  /* Navy — Standard-Text & Headlines */
    --cd-color-bg:                #FFFFFF;  /* Weiß — Standard-Hintergrund */

    /* — Akzent (Gold, DOSIERT einsetzen!) ——————————————————— */
    --cd-color-accent:            #FFBD59;  /* Gold — Eyebrows, Akzent-Borders */
    --cd-color-accent-soft:       #F5A93D;  /* Dunkleres Gold — Hover/Tiefe */

    /* — Funktional & Neutral (abgeleitet) ——————————————————— */
    --cd-color-text-on-primary:   #FFFFFF;  /* Text auf Koral-Flächen */
    --cd-color-text-muted:        #5E7A8A;  /* Gedämpftes Navy-Grau — sekundärer Text */
    --cd-color-border:            #E3E8EC;  /* Trennlinien, Card-Borders, Form-Inputs */

    /* — Dekorative Wellen-Farbe (aus CD, optional) ————————— */
    --cd-color-blush:             #EDE0DB;  /* Warmes Beige/Blush — Wellen-Grafiken */


    /* ────────────────────────────────────────────────────────
       TYPOGRAFIE
       ────────────────────────────────────────────────────────
       Hauptschrift: DM Sans
         - DM Sans Bold    (700) → Headlines, Hervorhebungen
         - DM Sans Regular (400) → Fließtext
       ────────────────────────────────────────────────────────  */

    --cd-font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* — Font-Weights —————————————————————————————————————— */
    --cd-fw-medium:               400;   /* Body-Text (DM Sans Regular) */
    --cd-fw-semibold:             700;   /* Headlines, Hervorhebungen (DM Sans Bold) */

    /* — Schriftgrößen (Standard-Web-Skala) ————————————————— */
    --cd-fs-h1:                   3.5rem;    /* 56px */
    --cd-fs-h2:                   2.5rem;    /* 40px */
    --cd-fs-h3:                   2rem;      /* 32px */
    --cd-fs-h4:                   1.5rem;    /* 24px */
    --cd-fs-h5:                   1.25rem;   /* 20px */
    --cd-fs-h6:                   1.125rem;  /* 18px */
    --cd-fs-body:                 1rem;      /* 16px */
    --cd-fs-small:                0.875rem;  /* 14px */

    /* — Line-Heights ——————————————————————————————————————— */
    --cd-lh-tight:                1.15;   /* Headlines */
    --cd-lh-normal:               1.5;    /* Body */
    --cd-lh-relaxed:              1.7;    /* Lange Lesetexte */


    /* ────────────────────────────────────────────────────────
       SPACING (8-Punkt-Skala)
       ────────────────────────────────────────────────────────  */

    --cd-space-2xs:               0.25rem;   /* 4px  */
    --cd-space-xs:                0.5rem;    /* 8px  */
    --cd-space-sm:                1rem;      /* 16px */
    --cd-space-md:                1.5rem;    /* 24px */
    --cd-space-lg:                2rem;      /* 32px */
    --cd-space-xl:                3rem;      /* 48px */
    --cd-space-2xl:               4rem;      /* 64px */
    --cd-space-3xl:               6rem;      /* 96px */


    /* ────────────────────────────────────────────────────────
       BORDER-RADIUS
       ────────────────────────────────────────────────────────
       Laut CD: Buttons als Pill (vollständig abgerundet),
       Cards deutlich abgerundet (siehe Website-Mockup S. 7).
       ────────────────────────────────────────────────────────  */

    --cd-radius-sm:               0.5rem;    /* 8px  — Inputs, kleine Elemente */
    --cd-radius-md:               1rem;      /* 16px — Cards (rund wie im Mockup) */
    --cd-radius-lg:               1.5rem;    /* 24px — größere Container */
    --cd-radius-pill:             999px;     /* Pill-Buttons */


    /* ────────────────────────────────────────────────────────
       SCHATTEN
       ────────────────────────────────────────────────────────  */

    --cd-shadow-sm:               0 1px 2px rgba(0, 66, 102, 0.06);
    --cd-shadow-md:               0 4px 12px rgba(0, 66, 102, 0.10);
    --cd-shadow-lg:               0 12px 32px rgba(0, 66, 102, 0.14);


    /* ────────────────────────────────────────────────────────
       TRANSITIONS
       ────────────────────────────────────────────────────────  */

    --cd-transition-fast:         150ms ease;
    --cd-transition-base:         250ms ease;
    --cd-transition-slow:         400ms ease;


    /* ────────────────────────────────────────────────────────
       LAYOUT
       ────────────────────────────────────────────────────────  */

    --cd-container-max:           1200px;
    --cd-container-padding:       var(--cd-space-md);

}