/* ==========================================================================
   Design System — "Organic Luxury" Dark
   maximum-health.de
   ========================================================================== */

:root {
  /* ---- Colors — Forest Sage + Warm Amber ---- */
  /* RGB channels for rgba() usage: rgba(var(--color-sage-rgb), 0.15) */
  --color-sage-rgb: 139, 191, 146;
  --color-sage-mid-rgb: 157, 196, 164;
  --color-gold-rgb: 232, 188, 74;
  --color-gold-deep-rgb: 201, 160, 62;
  --color-bg-deep-rgb: 12, 19, 14;
  --color-bg-card-rgb: 30, 46, 33;
  --color-bg-card-hover-rgb: 37, 58, 40;

  --color-sage: #8BBF92;
  --color-sage-light: #AEDAD5;
  --color-sage-muted: rgba(var(--color-sage-rgb), 0.22);
  --color-sage-soft: rgba(var(--color-sage-rgb), 0.12);

  --color-gold: #E8BC4A;
  --color-gold-light: #EAC55E;
  --color-gold-deep: #C9A03E;
  --color-gold-pale: #F5DFA0;
  --color-gold-cream: #fffbe6;
  --color-gold-mid: #C49B38;
  --color-gold-shimmer-rgb: 224, 188, 90;
  --color-gold-review: #FBBC04;
  --color-gold-soft: rgba(var(--color-gold-rgb), 0.16);
  --color-gold-glow: rgba(var(--color-gold-rgb), 0.35);

  --color-bg-deep: #0C130E;
  --color-bg-base: #121A14;
  --color-bg-card: #1E2E21;
  --color-bg-card-hover: #253A28;
  --color-bg-input: #1E2E21;
  --color-bg-input-focus: #2B4430;

  --color-text: rgba(255, 255, 255, 0.96);
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-text-dim: rgba(255, 255, 255, 0.58);

  --color-white: #ffffff;
  --color-black: #0A0A0A;
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-light: rgba(255, 255, 255, 0.22);

  --color-error: #E05A4F;

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Outfit', -apple-system, sans-serif;

  /* ---- Spacing & Layout ---- */
  --section-padding: 128px 24px;
  --section-padding-sm: 88px 20px;
  --container-max: 1400px;
  --container-narrow: 900px;
  --container-text: 680px;

  /* ---- Cards ---- */
  --card-radius: 16px;
  --card-radius-sm: 10px;
  --card-radius-lg: 24px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-duration: 0.9s;
  --reveal-easing: ease-out;
  --reveal-distance: 10px;
  --duration: 0.35s;
  --duration-fast: 0.2s;
  --duration-slow: 0.5s;
  --transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
  --transition-fast: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
  --transition-slow: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out);

  /* ---- Shadows ---- */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25),
               0 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3),
               0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4),
               0 8px 20px rgba(0, 0, 0, 0.2);

}