/* =========================================================================
   01-tokens.css — Design-Variablen
   Quelle: docs/design-system.md
   ========================================================================= */

:root {

  /* ----- Farben ----- */
  --c-accent:        #C3966F;   /* Kupfer/Beige — Hauptakzent, CTA-Buttons */
  --c-accent-dark:   #A07A56;   /* Hover/Active */
  --c-accent-light:  #D9B594;   /* Subtile Akzentflächen */

  --c-muted:         #91837E;   /* Original Muted aus Figma — Philosophie-Band, Buttons auf Akzent */
  --c-muted-light:   #B5ACA7;

  --c-dark:          #222725;   /* Headlines, Footer-Hintergrund */
  --c-dark-soft:     #3A3835;   /* Body-Text-Default */

  --c-cream:         #F4EBE0;   /* Warmer Cream-Hintergrund (HEX bitte aus Figma verifizieren) */
  --c-off-white:     #FAF6F0;   /* Hellster Bereich, Body-Default */
  --c-white:         #FFFFFF;

  --c-line:          #E8DFD3;   /* Trennlinien auf Cream-Hintergrund */

  /* Status / Utility */
  --c-error:         #B23A48;
  --c-success:       #6A8E7F;

  /* ----- Typografie ----- */
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid-Größen: clamp(min, fluid, max) */
  --t-display:  clamp(28px, 6vw, 56px);
  --t-h1:       clamp(26px, 3.4vw, 42px);
  --t-h2:       clamp(22px, 2.4vw, 28px);
  --t-h3:       clamp(18px, 1.8vw, 20px);

  --t-body-lg:  18px;
  --t-body:     16px;
  --t-meta:     14px;
  --t-eyebrow:  12px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-eyebrow: 0.18em;
  --ls-button:  0.12em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ----- Spacing-System (8-pt) ----- */
  --space-0:  0;
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --space-24: 192px;

  /* ----- Layout ----- */
  --container-max:         1320px;
  --container-pad-mobile:  24px;
  --container-pad-desktop: 48px;

  --section-pad-y-mobile:  var(--space-8);
  --section-pad-y-desktop: var(--space-16);

  /* ----- Borders & Shadows ----- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  --shadow-sm:  0 1px 2px rgba(34, 39, 37, 0.04), 0 1px 3px rgba(34, 39, 37, 0.06);
  --shadow-md:  0 4px 12px rgba(34, 39, 37, 0.08);
  --shadow-lg:  0 12px 32px rgba(34, 39, 37, 0.12);

  /* ----- Transitions ----- */
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   120ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;

  /* ----- z-Index Skala ----- */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
}