/**
 * THEME: ORGANIC TECH
 * Natürliche Erdtöne mit digitaler Präzision
 */

:root {
  /* Primary Palette - Earth Tones */
  --color-primary-900: #1a2e1a;
  --color-primary-800: #2d4a2d;
  --color-primary-700: #3d5e3d;
  --color-primary-600: #527252;
  --color-primary-500: #6b8e6b;

  --color-secondary-900: #3a4a3a;
  --color-secondary-800: #4d5e4d;
  --color-secondary-700: #627562;
  --color-secondary-600: #7a8e7a;
  --color-secondary-500: #94a894;
  --color-secondary-400: #b0c4b0;
  --color-secondary-300: #ccd9cc;
  --color-secondary-200: #e5ede5;
  --color-secondary-100: #f4f7f4;

  --color-accent-900: #6b3416;
  --color-accent-800: #8b4420;
  --color-accent-700: #a85636;
  --color-accent-600: #c66d4c;
  --color-accent-500: #d98667;
  --color-accent-400: #e5a489;
  --color-accent-300: #f0c3ac;

  --color-neutral-900: #a39582;
  --color-neutral-800: #b8a897;
  --color-neutral-700: #cdbdac;
  --color-neutral-600: #dfd3c3;
  --color-neutral-500: #ede5d8;
  --color-neutral-400: #f5f0e8;
  --color-neutral-300: #faf7f2;
  --color-neutral-200: #fdfcfa;

  /* Semantic Colors */
  --color-background: #faf7f2;
  --color-surface: #ffffff;
  --color-text-primary: #2a2a2a;
  --color-text-secondary: #4a5568;
  --color-text-muted: #718096;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6b8e6b 0%, #3d5e3d 100%);
  --gradient-secondary: linear-gradient(135deg, #b0c4b0 0%, #7a8e7a 100%);
  --gradient-accent: linear-gradient(135deg, #e5a489 0%, #c66d4c 100%);
  --gradient-organic: linear-gradient(120deg, #6b8e6b 0%, #a85636 50%, #dfd3c3 100%);

  /* Mesh Gradients */
  --mesh-hero:
    radial-gradient(at 27% 37%, hsla(115, 25%, 55%, 0.15) 0px, transparent 50%),
    radial-gradient(at 97% 21%, hsla(25, 45%, 45%, 0.12) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(35, 25%, 75%, 0.1) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(115, 35%, 35%, 0.18) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(35, 30%, 80%, 0.08) 0px, transparent 50%);

  /* Section Background Types */
  --background-primary: linear-gradient(165deg,
    rgba(107, 142, 107, 0.08) 0%,
    rgba(168, 86, 54, 0.06) 40%,
    rgba(223, 211, 195, 0.08) 100%
  );
  --background-primary-solid: #f4f7f4;

  --background-secondary: linear-gradient(135deg,
    rgba(176, 196, 176, 0.04) 0%,
    rgba(148, 168, 148, 0.05) 50%,
    rgba(250, 247, 242, 0.03) 100%
  );
  --background-secondary-solid: #fdfcfa;

  /* Component-specific (deprecated - use background-primary/secondary) */
  --hero-background: var(--color-neutral-300);
  --feature-background: var(--color-neutral-200);
  --highlight-background: var(--gradient-secondary);
  --images-background: #f7fafc;
  --text-background: var(--color-surface);
  --metrics-background: var(--color-secondary-100);
  --faq-background: var(--color-neutral-200);
  --gallery-background: #f7fafc;
  --cta-background: var(--color-primary-900);
  --cta-text: #ffffff;

  --navbar-background: rgba(255, 255, 255, 0.9);
  --navbar-scrolled: rgba(255, 255, 255, 0.95);

  /* Footer Gradient - Organic Earth (atmospheric depth) */
  --footer-gradient:
    linear-gradient(165deg,
      rgba(26, 46, 26, 1) 0%,
      rgba(29, 50, 29, 1) 50%,
      rgba(26, 47, 26, 1) 100%
    ),
    radial-gradient(ellipse at 20% 80%, rgba(107, 142, 107, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(168, 86, 54, 0.05) 0%, transparent 50%);
  --footer-background: var(--footer-gradient);
  --footer-text: #f4f7f4;
  --footer-link: #e5ede5;
  --footer-link-hover: #ffffff;

  /* Theme Name */
  --theme-name: "Organic Tech";
}