/* ============================================================
   tokens.css — Design-Tokens & Font-Imports
   Gemeinsames Fundament fuer hoofolution.com (mehrseitig).
   Verwendung:
     - var(--orange-deep) auf HELLEN Flaechen (Kontrast ~4.7:1 auf weiss)
     - var(--orange)      auf DUNKLEN Flaechen (Kontrast ~4.49:1 auf Hero-BG)
   Keine hartkodierten Hex-Farben in den Seiten — immer Tokens nutzen.
   ============================================================ */

/* FONTS: self-hosted (DSGVO, Inhaber-Entscheidung 2026-07-05) — KEINE Google-Fonts-
   Requests mehr (kein IP-Abfluss an Google). Jede Seite laedt EINEN Link im <head>:
     <link rel="stylesheet" href=".../assets/fonts/fonts.css">   (Pfad je nach Tiefe)
   @font-face-Regeln + woff2 (latin+latin-ext) liegen in assets/fonts/.
   Montserrat = Kopf/Fliesstext · Cormorant = Kicker/Ziffern MIT echtem Italic
   (die .app-Unterseiten nutzen reale Italic-Schnitte, kein synthetisches Kicker-Italic).
   KEIN @import (STRAT-25 — render-blocking verboten). */

:root{
  /* --- Markenfarben (1:1 aus index.html) --- */
  --blue:#1F3A5F;
  --blue-deep:#13283F;
  --blue-soft:#2D5377;
  --orange:#E37A2D;        /* NUR auf dunklen BGs (Kontrast ~4.49:1 auf Hero-BG) */
  --orange-deep:#B85A1A;   /* fuer Kicker/Akzente auf hellen Sektionen (~4.7:1 auf weiss) */

  /* --- Flaechen --- */
  --surface-warm:#F8F6F1;  /* Cream Off-White, helle Sektionen (Editorial) */
  --white:#ffffff;
  --surface:#F4F7FB;       /* kuehles Hellblau, alternative helle Flaeche */

  /* --- Linien / Schatten --- */
  --line:rgba(255,255,255,0.14);            /* helle Trennlinie auf dunklem BG */
  --line-dark:rgba(15,15,15,0.12);          /* dunkle Trennlinie auf hellem BG */
  --shadow:0 24px 70px rgba(7,17,29,0.18);
  --shadow-soft:0 12px 34px rgba(7,17,29,0.10);

  /* --- Text --- */
  --ink:#13283F;                            /* Standard-Textfarbe (dunkel) */
  --ink-soft:#46586B;                       /* gedaempfter Text */
  --ink-invert:#ffffff;                     /* Text auf dunklem BG */

  /* --- Schriften --- */
  --font-head:"Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:"Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-kicker:"Cormorant", Georgia, serif;

  /* --- Type Scale · Major Third 1.25 ab 16px (systematisch, fix, kein clamp) --- */
  --t-hero:4.768rem;        /* 76px — großer Präsentations-Hero */
  --t-display:3.815rem;     /* 61px */
  --t-h1:2.441rem;          /* 39px */
  --t-h2:1.953rem;          /* 31px */
  --t-h3:1.563rem;          /* 25px */
  --t-lead:1.25rem;         /* 20px */
  --t-body:1.0625rem;       /* 17px — 50+ lesefreundlich */
  --t-caption:0.8rem;       /* 12.8px */
  --t-kicker:1.125rem;      /* 18px — Content-Kicker */
  --t-kicker-hero:2.441rem; /* ~39px — Hero-Kicker */
  --lh-tight:1.08;
  --lh-body:1.6;

  /* --- Layout --- */
  --container:1400px;
  --container-pad:40px;

  /* --- Spacing-Skala --- */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;
  --space-2xl:96px;
  --section-y:72px;        /* vertikales Sektion-Padding */

  /* --- Radius --- */
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --radius-pill:999px;
}