/* =========================================================================
   ESG Bildungszentrum Vacha - Design-Tokens
   Hier zuerst anpassen. Farben stammen aus dem bestehenden ESG-Logo
   (Signalgrün #28B40A im Ring, dunkles Waldgrün in den Icon-Linien).
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Marke: eine Farbfamilie (Grün), abgestuft ---------------------- */
  --green-950: #0B2E17;
  --green-900: #0F3D1F;
  --green-800: #14532B;
  --green-700: #1B6B34;   /* Primärfläche: Buttons, dunkle Bänder        */
  --green-600: #23842A;
  --green-500: #2FA512;   /* Markenakzent aus dem Logo                   */
  --green-400: #5CC13C;
  --green-200: #C9E8BC;
  --green-100: #E4F2DC;
  --green-50:  #F1F8EC;

  /* --- Neutrale (leicht grünstichig, damit die Palette zusammenklingt) */
  --ink:       #16211A;
  --ink-2:     #3B483F;
  --ink-3:     #616E66;
  --line:      #E1E7E1;
  --line-soft: #EDF1EC;
  --surface:   #FFFFFF;
  --surface-2: #FFFFFF;
  --bg:        #FBFCFA;
  --bg-soft:   #F4F7F2;

  /* --- Semantische Rollen -------------------------------------------- */
  --brand:        var(--green-700);
  --brand-strong: var(--green-800);
  --brand-bright: var(--green-500);
  --on-brand:     #FFFFFF;
  --focus:        var(--green-600);

  /* --- Status --------------------------------------------------------- */
  --ok-bg:   var(--green-100);
  --ok-fg:   var(--green-800);
  --warn-bg: #FDF0DC;
  --warn-fg: #8A5A12;
  --full-bg: #F0F1F0;
  --full-fg: #5B655E;

  /* --- Typografie ----------------------------------------------------- */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.9375rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  --step-4:  clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  --step-5:  clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem);

  /* --- Raster & Rhythmus ---------------------------------------------- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 8vw, 8.5rem);

  /* --- Form: EIN Radius-System ----------------------------------------
     Buttons + Badges = Pille · Flächen/Bilder = 16px · Felder = 12px    */
  --r-pill: 999px;
  --r-card: 16px;
  --r-field: 12px;

  /* --- Schatten: in den Hintergrundton getönt, nie reines Schwarz ----- */
  --shadow-sm: 0 1px 2px rgba(22, 33, 26, .05);
  --shadow-md: 0 8px 24px -12px rgba(22, 33, 26, .18);
  --shadow-lg: 0 28px 60px -32px rgba(15, 61, 31, .34);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --z-header: 100;
  --z-menu: 110;
}