/* ============================================================
   tokens.css — NUHN Baudekoration Design-Tokens
   ECHTE Markenfarben: Weiß / Schwarz / Nuhn-Gelb #D5C601
   (aus dem Elementor-CSS und dem Logo der Original-Site).
   Diese Datei ist die einzige Quelle für Farben/Spacing/Typo-Werte.
   ============================================================ */

:root {
  /* Background ramp — Weiß wie die Original-Site */
  --bg-1: #FFFFFF;   /* primäre Fläche */
  --bg-2: #F5F4EF;   /* Karten / erhöhte Flächen */
  --bg-3: #EAE9E2;   /* Hover / Divider-Fläche */
  --bg-4: #FAFAF7;   /* Panels */

  /* Dunkle Bildflächen (Zeitraffer, Overlays) */
  --ink-surface: #111111;
  --ink-surface-2: #1C1C1A;

  /* Foreground */
  --fg-1: #111111;            /* Headlines */
  --fg-2: #33322F;            /* Fließtext */
  --fg-muted: #6F6E68;        /* Meta, Labels */
  --fg-on-dark: #F5F4EF;      /* Text auf dunklen Bildflächen */

  /* DER eine Akzent — Nuhn-Gelb (#D5C601 = Website, hellere Stufe = Logo) */
  --accent: #D5C601;
  --accent-bright: #F2E41C;                 /* auf dunklem Grund / Marker */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-ink: #111111;                    /* Text AUF Gelb ist immer Schwarz */

  /* Linien */
  --line: rgba(17, 17, 17, 0.14);
  --line-strong: rgba(17, 17, 17, 0.38);
  --line-on-dark: rgba(245, 244, 239, 0.2);

  /* Formzustände */
  --error: #B3261E;
  --success: #3E6B3A;

  color-scheme: light;

  /* Spacing */
  --space-xxs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   4rem;
  --space-xl:  clamp(80px, 12vw, 160px);   /* vertikales Section-Padding */

  /* Radii — die Marke ist ein hartes Quadrat: keine Rundungen */
  --r-xs: 0;
  --r-s:  0;
  --r-m:  0;

  /* Container */
  --max-w: 1360px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Z-Ramp */
  --z-base: 1;
  --z-panel: 80;
  --z-nav: 90;
  --z-wipe: 150;
  --z-preloader: 200;

  /* Typo — Anton (logonahe Blockschrift) + Barlow (Text & Labels) */
  --font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* --font-mono bleibt als Alias bestehen: alle .mono/.eyebrow-Stellen
     der Sektionen rendern damit automatisch als Barlow-Label statt Code-Mono */
  --font-mono: 'Barlow', system-ui, sans-serif;

  --t-xs:    0.8125rem;
  --t-s:     0.9375rem;
  --t-m:     1.0625rem;
  --t-l:     1.25rem;
  --t-xl:    clamp(1.5rem, 2.4vw, 2rem);
  --t-xxl:   clamp(2rem, 4vw, 3.25rem);
  --t-xxxl:  clamp(2.75rem, 6vw, 5rem);
  --t-hero:  clamp(3.5rem, 10vw, 9.5rem);

  /* Anton ist von Haus aus eng & fett: kein negatives Tracking */
  --display-letter-spacing: 0.01em;
  --display-line-height: 1.02;
  --hero-letter-spacing: 0.005em;
  --hero-line-height: 0.96;
  --mono-letter-spacing: 0.14em;
}