/* =============================================================================
   tokens.css — EINZIGE Stelle für Branding
   -----------------------------------------------------------------------------
   Für ein neues Kundenprojekt wird idealerweise NUR diese Datei angepasst:
   Farben, Schriftfamilien, Abstände, Radien. Struktur (HTML) und Logik (JS)
   bleiben unverändert. Siehe ARCHITECTURE.md, Abschnitt „Branding anpassen".

   Aufbau:
   1. Marken-Konstanten   — themenunabhängig (Logo-/Akzentfarben)
   2. Struktur-Tokens     — Typografie, Abstände, Radien, Schatten, Container
   3. Helles Theme        — Standard (:root)
   4. Dunkles Theme       — [data-theme="dark"], von theme-init.js gesetzt
   ============================================================================= */

:root {
  /* ---- 1. Marken-Konstanten (Platzhalter-Marke — bewusst gewählt) ---------- */
  --c-petrol:    #124049;            /* Primärmarke: dunkles Petrol (Logo, Headings) */
  --c-amber:     #CC7A2B;            /* Akzent: warmes Bernstein (CTA, Fokus, Labels) */
  --c-amber-600: #B0641F;            /* Akzent gedrückt / Hover */
  --c-steel:     #6E9197;            /* gedämpft: Metadaten, Sekundärtext */
  --c-steel-200: #C5D2D3;            /* helles Steel auf dunklen Flächen */
  --c-ink:       #0B2125;            /* dunkelste Neutrale (Footer) */

  /* Text/Hilfslinien auf dunklen Flächen (Hero, CTA, Footer) — themenunabhängig */
  --on-dark:        #EAF1F0;
  --on-dark-muted:  var(--c-steel-200);
  --c-line-dark:    rgba(255, 255, 255, .09);  /* Blueprint-Rasterlinien */

  /* Dunkler Verlauf für Hero-/CTA-Flächen (in beiden Themes gleich) */
  --grad-hero: linear-gradient(160deg, #0B2125 0%, #103138 55%, #0E2A30 100%);
  --grad-cta:  linear-gradient(135deg, #103138, #0B2125);

  /* ---- 2. Struktur-Tokens -------------------------------------------------- */

  /* Schriftfamilien (lokal gehostet, siehe base.css @font-face) */
  --font-display: 'Space Grotesk', system-ui, sans-serif;   /* Headlines */
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;   /* Fließtext */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace; /* Labels, Code */

  /* Fluide Typo-Skala (clamp = kein harter Breakpoint-Sprung) */
  --fs-display: clamp(2.3rem, 1.6rem + 3.2vw, 4.4rem);  /* Hero-H1 */
  --fs-h1:      clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 1.4rem + 1.6vw, 2.7rem);
  --fs-h3:      1.4rem;
  --fs-lead:    clamp(1.05rem, 1rem + .5vw, 1.25rem);   /* Einleitungstext */
  --fs-body:    clamp(1rem, .97rem + .15vw, 1.08rem);
  --fs-small:   .92rem;
  --fs-label:   .82rem;   /* Mono-Kommentar-Labels */
  --fs-micro:   .78rem;

  --lh-tight: 1.08;   /* Headings */
  --lh-base:  1.6;    /* Fließtext */

  /* Abstände (modulare Skala) */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs:  .75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: clamp(3rem, 2rem + 4vw, 5rem);

  /* Vertikaler Sektionsabstand + horizontales Container-Padding (fluid) */
  --section-y:     clamp(4rem, 2.5rem + 6vw, 7rem);
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, .75rem + 2.5vw, 4rem);

  /* Form & Tiefe */
  --radius:    3px;     /* technische, scharfe Optik — bewusst gering */
  --radius-sm: 2px;
  --border-w:  1px;
  --shadow-card: 0 18px 40px -22px rgba(11, 33, 37, .45);

  /* Bewegung */
  --transition-fast: .2s;
  --transition:      .25s;
  --ease:            cubic-bezier(.16, .84, .44, 1);  /* sanftes Auslaufen */

  /* Signature: Blueprint-Raster */
  --grid-size: 46px;

  /* Schichtung */
  --z-nav: 50;

  /* Fokus-Indikator (Tastatur) */
  --focus-color: var(--c-amber);

  /* ---- 3. Helles Theme (Standard) ----------------------------------------- */
  --bg:        #F4F6F5;
  --surface:   #FFFFFF;
  --text:      #0B2125;
  --text-muted:#0E3138;
  --border:    rgba(18, 64, 73, .14);
  --nav-bg:    rgba(244, 246, 245, .82);  /* mit backdrop-filter */
  --brand-fg:  var(--c-petrol);           /* Wortmarke <H/> — passt sich dem Theme an */
}

/* ---- 4. Dunkles Theme -----------------------------------------------------
   theme-init.js setzt data-theme="dark" auf <html>, bevor gerendert wird.
   Nur themenabhängige Tokens werden überschrieben; Marken-Konstanten bleiben. */
:root[data-theme="dark"] {
  --bg:        #091E22;
  --surface:   #11313A;
  --text:      #EAF1F0;
  --text-muted:#AEC2C4;
  --border:    rgba(174, 194, 196, .18);
  --nav-bg:    rgba(9, 30, 34, .82);
  --brand-fg:  var(--on-dark);
}