/* ==========================================================================
   DESIGN TOKENS — OFFICIAL A+ EUROTEC (AEUROTEC.DE) PALETTE & TYPOGRAPHY
   Exakte Farbharmonie wie auf aeurotec.de: Solar-Lime (#84CC16), Leaf-Green
   (#388505 / #3BB401), EuroTec-Anthrazit (#161E16 / #1F2937) & Reinweiß.
   ========================================================================== */

:root {
  /* Tier 1: A+ EuroTec Solar-Lime & Leaf-Green Palette (aeurotec.de) */
  --green-50: #F7FEE7;
  --green-100: #ECFCCB;
  --green-200: #D9F99D;
  --green-300: #BEF264;
  --green-400: #A3E635;
  --green-500: #84CC16;   /* Exakter Primär-Button-Grünton von aeurotec.de */
  --green-600: #65A30D;
  --green-700: #388505;   /* Kräftiges EuroTec-Blattgrün (AA-Kontrast auf Weiß) */
  --green-800: #3F6212;
  --green-900: #365314;
  --green-950: #1A2E05;

  /* Exakte Logo-Farben von A+ EuroTEC */
  --logo-dark: #161E16;
  --logo-green: #84CC16;
  --logo-tec: #3BB401;

  /* Tier 1: Clean White & EuroTec Slate (aus aeurotec.de Nav & Impressum) */
  --slate-50: #F9FAFB;
  --slate-100: #F3F4F6;
  --slate-200: #E5E7EB;
  --slate-300: #D1D5DB;
  --slate-400: #9CA3AF;
  --slate-500: #6B7280;
  --slate-600: #484E57;   /* Exakter Navigations-Grauton von aeurotec.de */
  --slate-700: #374151;
  --slate-800: #1F2937;   /* Exakter Impressum-Textton von aeurotec.de */
  --slate-900: #111827;   /* Exakter Button-Kontrastton von aeurotec.de */

  /* Dunkle EuroTec-Infrastrukturflächen (Anthrazit-Oliv statt kaltem Blaugrün) */
  --infra-950: #111612;
  --infra-900: #161E16;
  --infra-800: #1F2920;
  --infra-border: #2E3D2F;

  /* Diagnose-Statusfarben */
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;

  --red-50: #FEF2F2;
  --red-600: #DC2626;
  --red-700: #B91C1C;

  /* Tier 2: Semantische UI-Tokens */
  --bg-page: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #F9FAFB;
  --bg-accent-soft: var(--green-50);

  --text-primary: var(--slate-800);
  --text-heading: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-on-dark: #F9FAFB;
  --text-on-dark-muted: #C5D1C6;

  /* Marken- & Button-Tokens */
  --brand-primary: var(--green-700);       /* 4.64:1 Kontrast für Links/Headlines auf Weiß */
  --brand-primary-vivid: var(--green-500); /* #84CC16 EuroTec CTA-Fläche */
  --brand-cta-hover: #74B812;
  --brand-cta-text: #111827;               /* 8.98:1 AAA-Kontrast auf #84CC16 */
  --brand-primary-hover: var(--green-800);

  /* Rahmen mit >= 3:1 UI-Kontrast für Eingabefelder & aktive Karten */
  --border-subtle: var(--slate-200);
  --border-strong: #757F8C;
  --border-brand: #5C940D;

  /* Moderne, klare Sans-Serif Typografie (Monospace NUR für echte Code-Beispiele) */
  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout & Radien (runde Pill-Buttons wie auf aeurotec.de) */
  --container-max: 78rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.375rem;
  --radius-pill: 9999px;

  /* Dezente, moderne Schatten */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm: 0 4px 14px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 12px 28px -6px rgba(17, 24, 39, 0.09), 0 4px 10px -2px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(17, 24, 39, 0.13);
  --shadow-green: 0 8px 22px -4px rgba(132, 204, 22, 0.38);

  /* Barrierefreier Fokus-Ring */
  --focus-ring: #388505;
}