/* ==========================================================================
   WeitblickMedia — Design Tokens
   Quelle: design/brand.dc.html (Claude-Design Design-System)
   Alle Farben, Schriften, Abstände und Radien werden hier definiert.
   Nichts in styles.css sollte einen Hex-Wert hart kodieren.
   ========================================================================== */

:root {
  /* --- Farben ------------------------------------------------------------ */
  --c-bg:            #0B0A09;  /* Hintergrund, tiefes Warmschwarz */
  --c-bg-alt:        #0F0E0C;  /* Alternierende Sektionen */
  --c-surface:       #141210;  /* Cards */
  --c-surface-2:     #16130F;  /* Gradient-Start Angebotsbox */
  --c-surface-3:     #100E0C;  /* Gradient-Ende Angebotsbox */

  --c-text:          #F5F2EC;  /* Text primär */
  --c-text-muted:    #C9C3B9;  /* Fließtext gedimmt */
  --c-text-soft:     #A29C93;  /* Text sekundär */
  --c-text-faint:    #8A847B;  /* Hinweise, Fußnoten */
  --c-text-faintest: #6E685F;  /* Meta-Labels */

  --c-accent:        #E9B45E;  /* Weitblick Gold */
  --c-accent-hover:  #F5D79B;  /* Gold hell (Hover) */
  --c-accent-dim:    #B79A6A;  /* Gold gedimmt */
  --c-secondary:     #3E5A54;  /* Tiefgrün (sparsam einsetzen) */

  --c-line:          rgba(245, 242, 236, 0.09);
  --c-line-strong:   rgba(245, 242, 236, 0.12);
  --c-line-input:    rgba(245, 242, 236, 0.24);
  --c-line-accent:   rgba(233, 180, 94, 0.35);

  /* --- Typografie -------------------------------------------------------- */
  --font-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(38px, 7.2vw, 74px);   /* H1 Hero */
  --fs-h2:      clamp(28px, 4.2vw, 46px);
  --fs-h3:      18px;
  --fs-lead:    clamp(17px, 1.9vw, 20px);
  --fs-body:    16px;
  --fs-small:   15px;
  --fs-label:   11px;                        /* Mono-Labels */

  /* --- Layout ------------------------------------------------------------ */
  --wrap:        1240px;
  --wrap-narrow: 1000px;
  --pad-x:       clamp(18px, 4vw, 48px);
  --pad-y:       clamp(52px, 7vw, 104px);

  /* --- Radien (siehe Brand: 10 Badges · 18 Cards · 24 Flächen · 999 Buttons) */
  --r-badge:  10px;
  --r-media:  16px;
  --r-card:   18px;
  --r-panel:  26px;
  --r-pill:   999px;

  /* --- Motion ------------------------------------------------------------ */
  --t-fast: 150ms ease;
  --t-base: 220ms ease;
}