:root {
  /* COLOR PALETTE - Dappled Light Forest Canopy (Updated to New Design) */
  --color-forest-green: #304936; /* Forest Green */
  --color-leaf-green: #66734A; /* Leaf Green */
  --color-grass: #A59A5A; /* Grass */
  --color-water: #526F6B; /* Water accent */
  --color-bg: #F5F1E8; /* Background */
  --color-text: #292824; /* Dark Text */
  --color-red-ochre: #913832; /* Red Ochre */
  --color-red-ochre-dark: #71352A; /* Deep Ochre */
  --color-sand: #D8C9AD; /* Sand */

  /* TYPOGRAPHY SETTINGS */
  --font-heading: "DM Serif Display", serif;
  --font-body: "Source Sans 3", sans-serif;
  --font-body: "Source Sans 3", sans-serif;

  /* FLUID TYPE SCALE (Mobile to Desktop) */
  --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.36vw, 1.333rem);
  --text-xl: clamp(1.333rem, 1.21rem + 0.61vw, 1.688rem);
  --text-2xl: clamp(1.777rem, 1.54rem + 1.18vw, 2.441rem);
  --text-3xl: clamp(2.369rem, 1.95rem + 2.07vw, 3.535rem);
  --text-4xl: clamp(3.157rem, 2.47rem + 3.44vw, 5.093rem);
}

/* GLOBAL RULES */
.species-name {
  font-style: italic;
  font-family: var(--font-body);
}

/* TEXTURES & EFFECTS */
.texture-paper {
  background-color: var(--color-bg);
  color: var(--color-text);
  /* SVG Noise Overlay Data URI */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

.texture-canopy {
  background-color: var(--color-forest-green);
  color: var(--color-bg);
  /* Soft vignette gradient */
  background-image: radial-gradient(
    circle at center,
    var(--color-leaf-green) 0%,
    var(--color-forest-green) 100%
  );
}

.effect-god-ray {
  /* Light-leak/god-ray gradient using gold-light at low opacity */
  background: radial-gradient(
    circle at top left,
    rgba(242, 217, 168, 0.15) 0%,
    rgba(242, 217, 168, 0) 60%
  );
  pointer-events: none;
}