/* ==========================================================================
   BEEVANTA – DESIGN TOKENS
   Alle Design-Entscheidungen zentral als CSS Custom Properties.
   Änderungen hier wirken auf die gesamte Seite.
   ========================================================================== */

:root {
  /* === FARBEN === */
  --color-deep-navy: #070F1C;
  --color-royal-blue: #0B1628;
  --color-sapphire: #132244;
  --color-gold: #C9A443;
  --color-gold-hover: #D4B85C;
  --color-teal: #2DD4A8;
  --color-gold-subtle: rgba(201, 164, 67, 0.15);
  --color-gold-border: rgba(201, 164, 67, 0.3);
  --color-cool-gray: #F4F5F7;
  --color-white: #FFFFFF;
  --color-snow: #CBD5E1;
  --color-charcoal: #1A1A1A;
  /* Zwei Grautöne, weil ein einziger Wert beide Kontexte nicht AA-konform
     abdecken kann: für 4,5:1 auf Weiß braucht es eine Luminanz ≤ 0,183,
     für 4,5:1 auf Midnight ≥ 0,196 – das schließt sich aus.

     Hinweis zu --color-muted-light: Die Spec nennt #6B7280. Gemessen erreicht
     der Wert auf Weiß 4,83:1 (AA ok), auf Cool-Gray aber nur 4,43:1 – knapp
     unter AA. Betroffen wären 11 Elemente (FAQ-Antworten, Lösungs-Steps).
     #686F7E ist drei Punkte dunkler, optisch nicht unterscheidbar und
     erfüllt beide Flächen. Für den literalen Spec-Wert: auf #6B7280 setzen.
       --color-muted-light  auf Weiß 5,04:1 · auf Cool-Gray 4,62:1
       --color-muted        auf Midnight 4,83:1 */
  --color-muted-light: #686F7E;  /* Text auf Weiß / Cool-Gray */
  --color-muted: #757F8D;        /* Text auf dunklem Grund (Footer, CTA-Zusatzlink) */
  --color-amber: #F59E0B;
  --color-midnight: #050C17;

  /* --- Text-Tokens für hellen Hintergrund (WCAG AA, gemessen) ---
     Gold #C9A443 erreicht auf Weiß/Cool-Gray nur 2,37:1, Teal #2DD4A8 nur
     1,89:1 – beides nicht AA-konform, auch nicht als Großtext (braucht 3:1).
     Diese zwei dunkleren Varianten gelten ausschließlich für TEXT und ICONS
     auf Weiß/Cool-Gray (Preise, "Details ↓", aktiver Tab, Timeline-Wochen,
     Outline-Buttons, Checkmarks).
     Flächenfarben und Text/Icons auf dunklem Grund bleiben --color-gold /
     --color-teal – dort ist der Kontrast mit 5,4:1+ ausreichend. */
  --color-gold-text: #866C24;   /* 5,0:1 auf Weiß · 4,6:1 auf Cool-Gray */
  --color-teal-text: #0A7A5B;   /* 5,3:1 auf Weiß · 4,9:1 auf Cool-Gray */

  /* === TYPOGRAFIE === */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === FONT SIZES (Desktop) === */
  --text-h1: 52px;
  --text-h2: 32px;
  --text-h3: 22px;
  --text-body: 16px;
  --text-sub: 18px;
  --text-price: 28px;
  --text-button: 15px;
  --text-label: 12px;
  --text-small: 13px;
  --text-footer: 13px;

  /* === SPACING === */
  --section-padding: 80px;
  --section-padding-mobile: 48px;
  --container-max: 1200px;
  --container-narrow: 800px;
  --card-radius: 12px;
  --button-radius: 8px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* === TRANSITIONS === */
  --transition-fast: 200ms ease;
  --transition-medium: 300ms ease;
  --transition-slow: 500ms ease;

  /* === Z-INDEX === */
  --z-nav: 1000;
  --z-cookie: 9999;

  /* === ABGELEITETE WERTE === */
  --nav-height: 64px;
  --border-light: #E5E7EB;
}

/* === TABLET (≤768px) === */
@media (max-width: 768px) {
  :root {
    --text-h1: 38px;
    --text-h2: 28px;
    --text-h3: 20px;
    --nav-height: 56px;
  }
}

/* === MOBILE (≤390px) === */
@media (max-width: 390px) {
  :root {
    --text-h1: 30px;
    --text-h2: 24px;
    --text-h3: 18px;
    --text-body: 15px;
    --text-sub: 16px;
    --text-price: 22px;
    --text-button: 14px;
    --text-label: 11px;
    --section-padding: var(--section-padding-mobile);
  }
}