/* Echoes Beasts - Nature-Themed Color Scheme */
:root {
  /* Primary Nature Colors */
  --primary-forest: #2d4a35;      /* Deep forest green */
  --primary-moss: #3f5c3f;        /* Moss green */
  --primary-leaf: #5a7c5a;        /* Fresh leaf green */
  --primary-sage: #8ba88b;        /* Sage green */
  
  /* Secondary Earth Colors */
  --secondary-bark: #3c2f26;      /* Dark tree bark */
  --secondary-soil: #4a3a2e;      /* Rich soil */
  --secondary-stone: #5c5248;     /* Stone gray-brown */
  --secondary-clay: #7a6b5a;      /* Clay brown */
  
  /* Accent Beast Colors */
  --accent-amber: #b8860b;        /* Amber warning */
  --accent-rust: #a0522d;        /* Rusty red */
  --accent-bronze: #cd7f32;       /* Bronze metallic */
  --accent-gold: #daa520;         /* Gold highlights */
  
  /* Neutral Backgrounds */
  --bg-dark: #1a1f1a;            /* Very dark forest */
  --bg-medium: #2c332c;          /* Medium forest */
  --bg-light: #3d453d;           /* Light forest background */
  --bg-card: #2f3a2f;            /* Card backgrounds */
  
  /* Text Colors */
  --text-primary: #e8ede8;       /* Light sage for main text */
  --text-secondary: #bac5ba;     /* Muted sage for secondary text */
  --text-tertiary: #8d9b8d;      /* Darker sage for tertiary text */
  --text-accent: var(--accent-gold); /* Gold for highlights */
  
  /* Border Colors */
  --border-subtle: #4a5a4a;      /* Subtle borders */
  --border-medium: #5c6c5c;      /* Medium borders */
  --border-strong: var(--accent-bronze); /* Strong borders */
  
  /* Interactive States */
  --hover-overlay: rgba(139, 168, 139, 0.1); /* Sage overlay */
  --active-overlay: rgba(218, 165, 32, 0.15); /* Gold overlay */
  --focus-ring: var(--accent-amber);         /* Amber focus ring */
  
  /* Shadows */
  --shadow-small: 0 2px 4px rgba(26, 31, 26, 0.3);
  --shadow-medium: 0 4px 8px rgba(26, 31, 26, 0.4);
  --shadow-large: 0 8px 16px rgba(26, 31, 26, 0.5);
}

/* Color Utility Classes */
.text-forest { color: var(--primary-forest); }
.text-moss { color: var(--primary-moss); }
.text-leaf { color: var(--primary-leaf); }
.text-sage { color: var(--primary-sage); }
.text-amber { color: var(--accent-amber); }
.text-gold { color: var(--accent-gold); }

.bg-forest { background-color: var(--primary-forest); }
.bg-moss { background-color: var(--primary-moss); }
.bg-dark { background-color: var(--bg-dark); }
.bg-medium { background-color: var(--bg-medium); }
.bg-light { background-color: var(--bg-light); }
.bg-card { background-color: var(--bg-card); }

.border-subtle { border-color: var(--border-subtle); }
.border-medium { border-color: var(--border-medium); }
.border-strong { border-color: var(--border-strong); }