/* ==========================================================================
   Design Tokens — Camp-Gear.de
   ========================================================================== */

:root {
  /* Colors — Outdoor & Adventure palette */
  --color-primary-900: #1b2e1f;  /* Deep Forest */
  --color-primary-700: #2d4a35;  /* Pine */
  --color-primary-500: #3d6b4a;  /* Forest Green */
  --color-primary-300: #6b9e7a;  /* Moss */
  --color-primary-100: #e4f0e8;  /* Morning Mist */

  --color-secondary-700: #6b5237; /* Dark Earth */
  --color-secondary-500: #a07d54; /* Sandstone */
  --color-secondary-300: #d4bc96; /* Light Sand */
  --color-secondary-100: #f7f3ed; /* Off-White Linen */

  --color-neutral-900: #252525;  /* Charcoal */
  --color-neutral-700: #4a4a4a;  /* Dark Gray */
  --color-neutral-500: #7a7a7a;  /* Medium Gray */
  --color-neutral-300: #c8c8c8;  /* Light Gray */
  --color-neutral-100: #f2f2f0;  /* Near White */
  --color-neutral-50:  #ffffff;  /* White */

  --color-accent: #d4703c;       /* Campfire Orange */
  --color-accent-hover: #b85e30;
  --color-success: #4a9e5c;      /* Trail Green */

  /* Typography */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-2xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-3xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4rem);

  /* Spacing (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 50px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-6);

  /* Header */
  --header-height: 80px;
}