/* Canopy — Wildlife and parks — Loro Parque
   Generated by tools/themes.mjs. Do not hand-edit: every value is derived from
   the theme's seeds and contrast-checked, and an edit here would not be. */
:root {
  --bg: #FFFFFF;
  --bg-grouped: #EFF7F1;
  --bg-elevated: #FFFFFF;
  --bg-tertiary: #EAF3EC;
  --gray: #809E89;
  --gray-2: #A2B9A9;
  --gray-3: #C0D3C6;
  --gray-4: #CDDFD3;
  --gray-5: #E0EDE4;
  --gray-6: #EFF7F1;
  --accent-soft: #EBF9F3;
  --accent: #237B52;
  --accent-hover: #154C32;
  --on-accent: #FFFFFF;
  --cta: #AD610B;
  --cta-hover: #734107;
  --on-cta: #FFFFFF;
  --cta-ink: #AD610B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-grouped: #000000;
    --bg-elevated: #15261A;
    --bg-tertiary: #203727;
    --gray: #809E89;
    --gray-2: #5F8269;
    --gray-3: #466750;
    --gray-4: #32523C;
    --gray-5: #203727;
    --gray-6: #15261A;
    --on-accent: #000000;
    --accent-soft: #1D3E2F;
    --accent: #5BC292;
    --accent-hover: #87D3B0;
    --cta: #99560A;
    --cta-hover: #603606;
    --on-cta: #FFFFFF;
    --cta-ink: #F19327;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-grouped: #000000;
  --bg-elevated: #15261A;
  --bg-tertiary: #203727;
  --gray: #809E89;
  --gray-2: #5F8269;
  --gray-3: #466750;
  --gray-4: #32523C;
  --gray-5: #203727;
  --gray-6: #15261A;
  --on-accent: #000000;
  --accent-soft: #1D3E2F;
  --accent: #5BC292;
  --accent-hover: #87D3B0;
  --cta: #99560A;
  --cta-hover: #603606;
  --on-cta: #FFFFFF;
  --cta-ink: #F19327;
}