/* ==========================================================================
   RHEIN RUHR ENERGIEBERATUNG — DESIGN TOKENS v5 (ARCHITECTURAL TANNENGRÜN #1E4620)
   Hakan Kilinc, M.Sc. | Beratender Bauingenieur & Energieberater
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── 1. CORE PALETTE: ARCHITECTURAL LIGHT MODE ─────────────────────── */
  --rre-bg:              #F8F9FA;       /* Clear Off-White / Warm Architectural Stone */
  --rre-bg-alt:          #F1F3F5;       /* Soft Light Gray for Alt Sections */
  --rre-surface:         #FFFFFF;       /* Pure Crisp White Container */
  --rre-surface-hover:   #F9FAF9;       /* Subtle Architectural Hover */
  
  --rre-card-border:     #E2E8F0;       /* Fine 1px Light Gray Border (Flat Design) */
  --rre-card-border-hi:  #CBD5E1;       /* Border for dividers and inputs */

  /* Text & Ink (High-Contrast Anthracite & Slate) */
  --rre-ink:             #111827;       /* Dark Charcoal / Near-Black for Headlines */
  --rre-ink-secondary:   #1F2937;       /* Deep Slate for Subheads */
  --rre-muted:           #4B5563;       /* Balanced Slate Gray for Body Copy */
  --rre-dim:             #6B7280;       /* Refined Subdued Captions and Meta */

  /* ── 2. DOMINANT ACCENT: TANNENGRÜN (#1E4620) ───────────────────────── */
  /* Ersetzt das WordPress-Standardblau #3858e9 restlos */
  --rre-green:           #1e4620;       /* Seriöses dunkles Tannengrün */
  --rre-green-hover:     #163518;       /* Satter Waldton bei Interaktion */
  --rre-green-subtle:    #edf3ee;       /* Zarte Tannen-/Salbei-Tönung für Badges */
  --rre-green-border:    #295a2c;       /* 1px Rahmen-Tannengrün */
  --rre-sage:            #8a9a5b;       /* Gedämpftes Salbeigrün */

  /* ── 3. ENTSCHÄRFTE SIGNAL-FARBEN (KEINE AGGRESSIVEN NEON-FARBEN) ──── */
  --rre-error:           #d97757;       /* Weiches Terrakotta */
  --rre-error-subtle:    rgba(217, 119, 87, 0.12);
  --rre-warning:         #d4a373;       /* Mattes Ockergelb */
  --rre-warning-subtle:  rgba(212, 163, 115, 0.12);
  --rre-success:         #8a9a5b;       /* Gedämpftes Salbeigrün */
  --rre-success-subtle:  rgba(138, 154, 91, 0.12);

  /* ── 4. WORDPRESS & GUTENBERG BLUE OVERRIDES (#3858E9 -> #1E4620) ───── */
  --wp-admin-theme-color:                           #1e4620;
  --wp-admin-theme-color--rgb:                      30, 70, 32;
  --wp-admin-theme-color-darker-10:                 #163518;
  --wp-admin-theme-color-darker-20:                 #112813;
  --wp-components-color-accent:                     #1e4620;
  --wp-components-color-accent-darker-10:           #163518;
  --wp-components-color-accent-darker-20:           #112813;
  --wpds-color-background-interactive-brand-strong: #1e4620;
  --wpds-color-background-interactive-brand-hover:  #163518;
  --wpds-color-stroke-focus:                        #1e4620;
  --wpds-color-accent:                              #1e4620;
  --wp-theme-primary:                               #1e4620;
  --wp--preset--color--primary:                     #1e4620;
  --wp--preset--color--vivid-cyan-blue:             #1e4620; /* Overrides default blue */
  --wp--preset--color--luminous-vivid-amber:        #d4a373; /* Overrides WP warning */
  --wp--preset--color--vivid-red:                   #d97757; /* Overrides WP error */
  --wp--preset--color--luminous-vivid-orange:       #d4a373;

  /* Backward Compatibility Aliases */
  --rre-night:           var(--rre-bg);
  --rre-night-soft:      var(--rre-bg-alt);
  --rre-night-card:      var(--rre-surface);
  --rre-night-hover:     var(--rre-surface-hover);
  --rre-lime:            var(--rre-green);
  --rre-lime-glow:       transparent;
  --rre-green-glow:      transparent;
  --neon-orange:         var(--rre-green);
  --neon-orange-glow:    transparent;
  --neon-orange-subtle:  var(--rre-green-subtle);
  --rre-dark:            #FFFFFF;

  /* Lines & Dividers */
  --rre-line:            #E5E7EB;
  --rre-line-light:      #F1F5F9;

  /* Shadows (SUBTLE FLAT DEPTH ONLY — NO GLOW, NO BUTTON DROP SHADOWS) */
  --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card:         0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-card-hover:   0 8px 20px -4px rgba(30, 70, 32, 0.08);
  --shadow-header:       0 1px 3px rgba(0, 0, 0, 0.05);

  /* ── 5. TYPOGRAPHY: MODERN SANS-SERIF (INTER) EXCLUSIVELY ────────── */
  --font-sans:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── 6. ARCHITEKTONISCHE KANTEN (GLATTE 8PX KONSEQUENT) ───────────── */
  --tile-radius:         8px;           /* Konsequent glatte 8px */
  --radius-sm:           8px;
  --radius-md:           8px;
  --radius-lg:           8px;
  --radius-full:         8px;           /* Buttons & Badges vereinheitlicht auf 8px */
  --wpds-border-radius:  8px;
  --wp--custom--border-radius: 8px;

  /* ── 7. SPACING & LAYOUT ─────────────────────────────────────────── */
  --space-xs:            8px;
  --space-sm:            16px;
  --space-md:            24px;
  --space-lg:            48px;
  --space-xl:            80px;
  --space-2xl:           120px;
  --space-3xl:           160px;

  --max-w:               1280px;
  --max-w-text:          680px;
  --header-h:            76px;

  /* ── MOTION ───────────────────────────────────────────────────── */
  --ease-spring:         cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:            0.15s;
  --dur-normal:          0.3s;
  --dur-slow:            0.6s;

  /* ── Z-INDEX ──────────────────────────────────────────────────── */
  --z-canvas:            0;
  --z-scrolly-bg:        1;
  --z-content:           10;
  --z-floating:          100;
  --z-header:            150;
  --z-modal:             200;
}