/* =========================================================================
   Eckhütt Eins — Design Tokens
   Stand: April 2026
   Farben: Petrolgrün (Kern), Gold (Akzent), Aubergine (sekundärer Akzent)
   Schrift: Montserrat (Light 300 / Regular 400 / SemiBold 600)
   ========================================================================= */

:root {
  /* ---------- Farben: Kern ---------- */
  --color-petrol-900: #0e2a2c;   /* tiefstes Petrolgrün – Hero, Header, Footer */
  --color-petrol-800: #143639;   /* Hauptfläche dunkel */
  --color-petrol-700: #1d474a;   /* Buttons, Akzentflächen */
  --color-petrol-600: #2a5c60;   /* Hover, Sekundärfläche */
  --color-petrol-500: #3d7276;   /* Linien, Borders auf Dunkel */

  /* ---------- Farben: Gold ---------- */
  --color-gold-500:   #c9a55c;   /* Primär-Gold, Überschriften-Akzent */
  --color-gold-400:   #d8b872;   /* Helleres Gold, Hover-Links */
  --color-gold-300:   #e6cca3;   /* dezente Umrandung */
  --color-gold-200:   #f0dcab;   /* ganz leise Flächen */

  /* ---------- Farben: Aubergine (Kontrast-geprüft eingesetzt) ---------- */
  --color-aubergine-900: #2c1520;   /* sehr tiefes Aubergine – Akzentflächen */
  --color-aubergine-700: #4a2337;   /* Navigation aktiver Zustand */
  --color-aubergine-500: #6b3350;   /* Zitatkarten-Hintergrund */
  --color-aubergine-300: #9a5f7c;   /* nur als Rand, nie als Text auf Dunkel */

  /* ---------- Neutrale & Warme Töne ---------- */
  --color-cream:      #f5efe4;   /* warmer heller Hintergrund */
  --color-cream-dark: #ebe3d4;   /* leichte Flächentrennung */
  --color-sand:       #d9cfba;   /* Borders, Trennelemente */
  --color-bark:       #4a3e2d;   /* warmes Dunkelbraun für Text auf Creme */
  --color-ink:        #1a1a1a;   /* primärer Textton */
  --color-ink-soft:   #3a3a3a;   /* sekundärer Textton */
  --color-ink-muted:  #6b6b6b;   /* Metadaten, Captions */
  --color-white:      #ffffff;
  --color-shadow:     rgba(14, 42, 44, 0.12);

  /* ---------- Typografie ---------- */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

  /* Type-Scale (modular, 1.25 – Major Third) */
  --fs-xs:   0.78rem;    /* 12.5px — Caption, Meta */
  --fs-sm:   0.875rem;   /* 14px   — Small text */
  --fs-base: 1rem;       /* 16px   — Body */
  --fs-md:   1.125rem;   /* 18px   — Lead paragraphs */
  --fs-lg:   1.4rem;     /* 22.4px — H4, large body */
  --fs-xl:   1.75rem;    /* 28px   — H3 */
  --fs-2xl:  2.2rem;     /* 35.2px — H2 */
  --fs-3xl:  2.8rem;     /* 44.8px — H1 */
  --fs-hero: 3.6rem;     /* 57.6px — Hero on desktop */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.65;
  --lh-relaxed: 1.8;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-widest: 0.18em;  /* für Label-/Micro-Copy */

  /* ---------- Spacing Scale ---------- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* ---------- Layout ---------- */
  --max-w-content: 70ch;       /* Fließtext-Spalten für Lesbarkeit */
  --max-w-wide:    1200px;     /* Sektion-Container */
  --max-w-narrow:  860px;      /* zentrierte Abschnitte */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ---------- Schatten (subtil) ---------- */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 14px var(--color-shadow);
  --shadow-lg: 0 10px 30px var(--color-shadow);

  /* ---------- Transition ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  450ms;
}

/* ---------- Responsive Type-Scale ---------- */
@media (max-width: 768px) {
  :root {
    --fs-2xl:  1.8rem;
    --fs-3xl:  2.2rem;
    --fs-hero: 2.4rem;
    --space-9: 4rem;
    --space-10: 5rem;
  }
}