/* ============================================================
   BÄREN ENTRÜMPELUNG – Design Tokens
   ============================================================ */

:root {
  color-scheme: light;
  /* ── Brand Colors ─────────────────────────────────────── */
  --clr-primary:        #26b12c;
  --clr-primary-dark:   #1a8a1f;
  --clr-primary-light:  #5eca63;
  --clr-accent:         #26b12c;
  --clr-accent-soft:    #d5ffe2;
  --clr-accent-glow:    rgba(38, 177, 44, 0.18);

  /* ── Neutral Palette ──────────────────────────────────── */
  --clr-900: #111614;
  --clr-800: #1c221e;
  --clr-700: #374039;
  --clr-500: #6b7570;
  --clr-300: #b0bab4;
  --clr-100: #f4f7f5;
  --clr-50:  #f9fbfa;
  --clr-white: #ffffff;

  /* ── Gradients ────────────────────────────────────────── */
  --grad-primary:   linear-gradient(135deg, #0d5610 0%, #26b12c 100%);
  --grad-hero:      linear-gradient(160deg, rgba(5,15,8,0.92) 0%, rgba(10,45,14,0.80) 45%, rgba(21,115,25,0.55) 100%);
  --grad-card:      linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
  --grad-green-line: linear-gradient(90deg, transparent, #26b12c, transparent);

  /* ── Typography ───────────────────────────────────────── */
  --font-heading: 'Montserrat', -apple-system, sans-serif;
  --font-body:    'Lato', -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  clamp(2.5rem, 5vw, 3.75rem);

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:   1.15;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;

  /* ── Spacing ──────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-8:  3rem;
  --sp-10: 4rem;
  --sp-12: 5rem;
  --sp-16: 7rem;

  --section-pad: clamp(4rem, 9vw, 8rem);
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 3.5rem);
  --container-pad-mobile: clamp(0.75rem, 4vw, 1.25rem);

  /* ── Borders & Radius ─────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.14);
  --shadow-xl:    0 24px 64px rgba(0,0,0,0.18);
  --shadow-green: 0 8px 32px rgba(21,115,25,0.3);
  --shadow-card:  0 2px 8px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.08);

  /* ── Transitions ──────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-base: 350ms var(--ease-out);
  --transition-slow: 600ms var(--ease-out);

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}