/* ============================================================
   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: KEIN @import (STRAT-25 — render-blocking verboten).
   SELF-HOSTED seit 2026-07-06 (DSGVO, Inhaber-Entscheid): jede Unterseite lädt im <head>
   GENAU EINEN stylesheet-Link auf die lokale Font-Datei (Pfad relativ zur Seitentiefe):
     <link rel="stylesheet" href="assets/fonts/fonts.css">        (Root-Seiten)
     <link rel="stylesheet" href="../assets/fonts/fonts.css">     (legal/* u.ä.)
   KEINE preconnect-/Google-Zeilen mehr — fonts.css bringt Montserrat 300-800 +
   Cormorant 500/600/700 inkl. ECHTEM Italic als lokale woff2 mit (null externe Requests).
   Startseite (index.html) seit 2026-07-12 ebenfalls lokal — via fonts-start.css
   (gleiche woff2, BEWUSST OHNE Italic-Deklarationen: das Intro-Video ist aufs
   synthetische Kicker-Italic gerendert, dort NIE echtes Italic nachruesten).
   Ganze .com google-frei. Neue Seiten IMMER mit fonts.css, nie mit Google. */

: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;
}