/* ===============================
   CSS VARIABLES - SHARED
   Used across all NaturRo pages
   This file should be loaded first before all other CSS

   UNIFIED COLOR SYSTEM:
   - Single source of truth for all colors
   - Use var(--color-green) never hardcoded #00400e or #065f46
   - --color-green: NaturRo brand green
   - --color-green-dark: Hover/darker variant

   LAYOUT & PADDING:
   - Section/content padding reused across front page, vandreophold, om-naturro
   - --section-padding-* for page sections
   - --content-padding for text blocks and cards
================================ */

:root {
  /* Primary theme colors */
  --color-orange: #ff590f;
  --color-light-blue: #c3e4ff;
  --color-yellow: #f9f6d0;
  --color-blue: #2b59ae;
  --color-green: #00400e;
  --color-green-dark: #00300a; /* Darker green for hover states - derived from --color-green */
  --color-teal: #357774;
  --color-red: #840f27;
  --color-coral: #f45c5e;
  
  /* Neutral colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark-gray: #1c1c1c;
  --color-gray: #666;
  --color-light-gray: #f0f0f0;
  --color-light-gray-bg: #f8f8f8;
  
  /* New theme colors (from wild-layout) */
  --color-moss-bg: #f1f4f1;
  --color-moss-accent: #6b8f71;
  --color-moss-ink: #1f3d2b;
  --color-sand-bg: #f7f3ed;
  --color-sand-accent: #b88b5a;
  --color-sand-ink: #3a2f25;
  --color-stone-bg: #f2f2f2;
  --color-stone-accent: #6b6b6b;
  --color-stone-ink: #1e1e1e;
  --color-default-bg: #f4efe9;
  --color-default-accent: #5f7f6a;
  --color-default-ink: #1c1c1c;

  /* Text and card colors - used for content readability */
  --color-nature-text-primary: #1f2d24;
  --color-nature-text-secondary: #4a5a50;
  
  /* Typography */
  --font-primary: Inter, sans-serif;
  --font-display: "Playfair Display", serif;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Section and content layout - used across all pages */
  --section-padding-y: 6rem;
  --section-padding-x: 4vw;
  --section-padding-y-tablet: 4rem;
  --section-padding-x-tablet: 2rem;
  --section-padding-y-mobile: 3rem;
  --section-padding-x-mobile: 1.5rem;
  --section-large-padding-y: 8rem;
  --section-header-margin-bottom: 4rem;
  --section-title-margin-bottom: 1rem;
  --content-max-width: 1400px;
  --content-padding: 2rem;
  --content-padding-mobile: 1.5rem;
  --section-subtitle-max-width: 600px;
  /* Trip detail: description + included sections use same max-width for consistent text inset */
  --trip-section-content-max-width: 1200px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 50%;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.2);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index layers */
  --z-base: 1;
  --z-sticky: 100;
  --z-sticky-bar: 999;
  --z-overlay: 1000;
  --z-modal: 2000;

  /* Sticky buy bar layout */
  --sticky-buy-bar-height: 56px;
  --navbar-offset: 70px;
}