/* ============================================================
   Pflegediener24h — Design Tokens
   Eigene Sprache auf Basis des CareNova-Systems:
   Vertrauensblau (Navy) + warmes Bernstein/Honig,
   warme Sand-Flächen, Serif-Headline + humanist Sans.
   Spacing / Radien / Motion = 1:1 vom System übernommen.
   ============================================================ */

:root {
  /* ---- Brand: Blau (Vertrauen, Struktur) ---- */
  --navy-900: #2a6aac; /* deepest ink / footer */
  --navy-800: #3d80c4; /* tile / dunkle Karten */
  --navy-700: #4f93cf; /* core brand blue (Buttons, Highlights) */
  --navy-600: #74aadd;
  --navy-500: #9ac3e9; /* lighter blue, links on dark */

  /* ---- Brand: Orange (Energie, Akzent) ---- */
  --amber-700: #b3531a; /* tiefes Orange (Text-Akzent, lesbar) */
  --amber-600: #f5772f; /* hover */
  --amber-500: #ff8c4b; /* core accent (sanftes Orange) */
  --amber-400: #ffa873; /* helles Orange (Highlight auf Dunkel) */
  --amber-300: #ffc9a3; /* gradient tip */

  /* ---- Warm secondary (Fehler/Warnung, sehr sparsam) ---- */
  --clay-500: #C75C44;

  /* ---- Neutrals (kühles Grau + Weiß) ---- */
  --ink-900: #1b2a3a; /* primary text */
  --ink-800: #25384c; /* deep surface alt */
  --ink-500: #667586; /* muted text (cool gray) */
  --ink-300: #d2e0ef; /* faint text on dark */
  --line-200: #ebebeb; /* hairline borders (hellgrau) */
  --line-300: #c0c0c0; /* stronger border (silber) */
  --sand-050: #FFFFFF; /* page background (white) */
  --sand-100: #ebebeb; /* sunken / banded surface */
  --white:    #FFFFFF;

  /* ---- Tints (translucent, über helle Flächen) ---- */
  --amber-a06: rgba(255, 140, 75, 0.07);
  --amber-a08: rgba(255, 140, 75, 0.11);
  --amber-a10: rgba(255, 140, 75, 0.14);
  --amber-a20: rgba(255, 140, 75, 0.22);
  --amber-a30: rgba(255, 140, 75, 0.32);
  --navy-a04:  rgba(79, 147, 207, 0.07);
  --navy-a06:  rgba(79, 147, 207, 0.10);
  --navy-a10:  rgba(79, 147, 207, 0.15);
  --clay-a08:  rgba(199, 92, 68, 0.08);

  /* ---- Gradients ---- */
  --grad-amber: linear-gradient(135deg, var(--amber-600), var(--amber-300));
  --grad-warm:  linear-gradient(120deg, var(--navy-700), var(--amber-500));
  --grad-image: linear-gradient(180deg, transparent 35%, rgba(1,42,79,0.58) 100%);
  --grad-image-soft: linear-gradient(135deg, var(--amber-a08), transparent 60%);

  /* ===== Semantic aliases ===== */
  --accent:         var(--navy-800);
  --accent-hover:   var(--navy-900);
  --accent-2:       var(--navy-700);

  --highlight:      #e0742a;   /* hell-orange, dezenter Highlight (helle Flächen) */
  --highlight-soft: #ffb380;   /* heller, auf dunklen Flächen */

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-accent:    var(--navy-900);
  --text-on-accent: #ffffff; /* weißer Text auf Blau */
  --text-on-dark:   var(--ink-300);

  --surface-page:   var(--sand-050);
  --surface-card:   var(--white);
  --surface-sunken: var(--sand-100);
  --surface-footer: var(--navy-900);
  --surface-tint:   var(--amber-a08);

  --border-default: var(--line-200);
  --border-strong:  var(--line-300);
  --border-accent:  var(--amber-a20);

  --focus-ring:     var(--navy-700);

  /* ---- Typografie (eigene Paarung) ---- */
  --font-heading: 'Cabin', 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

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

  --text-hero:    clamp(2.6rem, 5.2vw, 4.25rem);
  --text-display: clamp(2.1rem, 4vw, 3.1rem);
  --text-h2:      clamp(1.9rem, 3.4vw, 2.6rem);
  --text-h3:      1.4rem;
  --text-h4:      1.12rem;

  --text-lead:    1.18rem;
  --text-base:    1rem;
  --text-sm:      0.92rem;
  --text-xs:      0.8rem;

  --label-size:    0.78rem;
  --label-weight:  700;

  --leading-tight:   1.12;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.72;

  --tracking-display: 0px;
  --tracking-tight:   0px;
  --tracking-wide:    1.5px;
  --tracking-wider:   2.4px;

  /* ---- Spacing (vom System) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-9: 36px;
  --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px;
  --space-20: 80px; --space-25: 100px; --space-30: 120px;

  --container-max: 1200px;
  --container-pad: 24px;
  --nav-height:    74px;

  /* ---- Radii (vom System) ---- */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
  --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px;
  --radius-pill: 100px; --radius-full: 9999px;

  /* ---- Shadows (warm getönt) ---- */
  --shadow-xs:    0 1px 2px rgba(30, 37, 48, 0.05);
  --shadow-sm:    0 2px 10px rgba(30, 37, 48, 0.06);
  --shadow-md:    0 10px 28px rgba(30, 37, 48, 0.08);
  --shadow-lg:    0 16px 46px rgba(30, 37, 48, 0.12);
  --shadow-float: 0 14px 40px rgba(1, 42, 79, 0.18);
  --glow-accent:  0 10px 30px rgba(79, 147, 207, 0.36);

  --blur-nav: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s; --dur-base: 0.3s; --dur-slow: 1s;
  --lift: translateY(-3px); --lift-lg: translateY(-5px);
}