/* ===============================
   CSS VARIABLES - SHARED
   Used across all NaturRo pages
================================ */

:root {
  /* Primary theme colors */
  --color-orange: #ff590f;
  --color-light-blue: #c3e4ff;
  --color-yellow: #f9f6d0;
  --color-blue: #2b59ae;
  --color-green: #00400e;
  --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;
  
  /* 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;
  
  /* 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-overlay: 1000;
  --z-modal: 2000;
}