/* ============================================================
   immergrün Design System — Core Tokens
   Single source of truth for color, type, space, radius, motion.
   Import this on every page that wants the brand.
   ============================================================ */

/* Fonts werden lokal gehostet (DSGVO) — siehe fonts.css. Google-CDN-Import entfernt. */
@import url('fonts.css');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Two canonical brand greens */
  --ig-green:           #084b32;   /* "IG Green" — primary brand green */
  --ig-fresh-green:     #96c31e;   /* "IG Fresh Green" — produce accent */

  /* Forest scale (primary spine) */
  --ig-forest-900:      #0d2818;   /* gradient start, deepest */
  --ig-forest-800:      #084b32;   /* = --ig-green */
  --ig-forest-700:      #1b4332;
  --ig-forest-600:      #2d6a4f;
  --ig-forest-500:      #40916c;
  --ig-forest-400:      #52b788;
  --ig-forest-300:      #74c69d;
  --ig-forest-200:      #b7e4c7;

  /* Green tints (background washes) */
  --ig-tint-100:        #e8f5e9;   /* pill bg */
  --ig-tint-50:         #f0faf4;   /* section bg */

  /* IG Red — reserved accent (Teamwork chapter, alerts, emphasis) */
  --ig-red:             #eb5555;
  --ig-red-700:         #c23e3e;
  --ig-red-900:         #7a1f1f;
  --ig-red-100:         #fdecec;

  /* Neutrals */
  --ig-fg:              #1a1a1a;   /* primary text */
  --ig-fg-2:            #4a5a52;   /* body */
  --ig-fg-3:            #7a8a82;   /* muted, captions */
  --ig-fg-4:            #aab5af;   /* placeholder, ghost */
  --ig-line:            #dde6e0;   /* hairline border */
  --ig-line-soft:       #ecf1ed;
  --ig-bg:              #ffffff;
  --ig-bg-warm:         #f8f5ed;   /* warm off-white surface */

  /* ---------- TYPOGRAPHY ---------- */
  --ff-display:         'DM Serif Display', 'Georgia', serif;
  --ff-body:            'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — feels generous on hero, compact in UI */
  --fs-hero:            38px;     /* mobile hero */
  --fs-h1:              32px;
  --fs-h2:              24px;
  --fs-h3:              20px;
  --fs-lead:            17px;
  --fs-body:            14px;     /* compact body */
  --fs-body-sm:         13px;
  --fs-caption:         12px;
  --fs-label:           11px;     /* uppercase, 1px tracked */

  --lh-tight:           1.1;
  --lh-snug:            1.25;
  --lh-body:            1.55;
  --lh-loose:           1.7;

  /* ---------- SPACING (8-based) ---------- */
  --sp-1:               4px;
  --sp-2:               8px;
  --sp-3:               12px;
  --sp-4:               16px;
  --sp-5:               20px;
  --sp-6:               24px;
  --sp-8:               32px;
  --sp-10:              40px;
  --sp-12:              48px;
  --sp-16:              64px;

  /* ---------- RADII ---------- */
  --r-badge:            10px;     /* chips, badges */
  --r-card:             14px;     /* cards (12–16 range) */
  --r-card-lg:          16px;
  --r-pill:             20px;     /* pills, nav, rounded buttons */
  --r-full:             999px;    /* circles, dots */

  /* ---------- SHADOWS ---------- */
  --sh-card:            0 1px 3px rgba(0, 0, 0, 0.04);
  --sh-card-soft:       0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-logo-halo:       0 8px 30px rgba(8, 75, 50, 0.18);
  --sh-product:         0 20px 40px rgba(0, 0, 0, 0.45);

  /* ---------- GRADIENTS (chapter backgrounds) ---------- */
  --grad-welcome:       linear-gradient(135deg, #0d2818 0%, #1b4332 50%, #2d6a4f 100%);
  --grad-products:      linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%);
  --grad-history:       linear-gradient(135deg, #0d2818 0%, #1b4332 100%);
  --grad-values:        linear-gradient(135deg, #2d6a4f 0%, #40916c 50%, #52b788 100%);
  --grad-teamwork:      linear-gradient(135deg, #7a1f1f 0%, #c23e3e 60%, #eb5555 100%);
  --grad-protect-btm:   linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);

  /* ---------- MOTION ---------- */
  --ease-out:           cubic-bezier(.2, .7, .3, 1);
  --dur-fast:           0.2s;
  --dur:                0.35s;
  --dur-slow:           0.4s;
}

/* ============================================================
   SEMANTIC CLASSES — drop on elements to apply the system
   ============================================================ */

.ig-hero {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ig-fg);
}
.ig-h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--ig-fg);
}
.ig-h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--ig-fg);
}
.ig-h3 {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ig-fg);
}
.ig-lead {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ig-fg-2);
}
.ig-body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ig-fg-2);
}
.ig-caption {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--ig-fg-3);
}
.ig-label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ig-fg-3);
}
.ig-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--ig-fg);
}

/* Card primitives */
.ig-card {
  background: var(--ig-bg);
  border: 1px solid var(--ig-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--sp-4);
}
.ig-card--highlight {
  border: 1.5px solid var(--ig-forest-600);
}
.ig-card--note {
  border-left: 3px solid var(--ig-forest-700);
}

/* Buttons (mobile-first, no hover idiom) */
.ig-btn {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-body);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ig-btn--primary {
  background: var(--ig-green);
  color: #fff;
}
.ig-btn--primary:active { transform: scale(0.97); background: var(--ig-forest-700); }
.ig-btn--ghost {
  background: transparent;
  color: var(--ig-green);
  border: 1px solid var(--ig-line);
}
.ig-btn--circle {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--ig-green);
  color: #fff;
  display: inline-grid;
  place-items: center;
}
.ig-btn--circle:active { transform: scale(0.92); }

/* Pills / chips */
.ig-pill {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ig-tint-100);
  color: var(--ig-forest-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ig-pill--dark {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.ig-pill--red {
  background: var(--ig-red-100);
  color: var(--ig-red-700);
}

/* Animations */
@keyframes ig-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ig-slide-in-left {
  from { opacity: 0; transform: translateX(-15px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ig-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ig-anim-fade-up   { animation: ig-fade-in-up   var(--dur)      var(--ease-out) both; }
.ig-anim-slide-in  { animation: ig-slide-in-left var(--dur-slow) var(--ease-out) both; }
.ig-anim-float     { animation: ig-float 3s ease-in-out infinite; }

/* Base reset for documents that include this */
.ig-doc, .ig-doc * { box-sizing: border-box; }
.ig-doc {
  font-family: var(--ff-body);
  color: var(--ig-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}