/* I Love Birds design tokens: shared by the home, species and explore pages. Rationale: docs/design-system.md. */
:root {
  /* Canopy palette (dark, cinematic) and warm sunlight accent. Text on canopy-950 passes WCAG AA at every step used. */
  --canopy-950: #0B1410; --canopy-900: #101C16; --canopy-800: #14261D; --canopy-700: #1C3328; --moss-500: #3E7B57;
  --fern-300: #9CCB9F; --mist-100: #E8EFEA; --mist-80: rgb(232 239 234 / .8); --mist-60: rgb(232 239 234 / .62);
  --mist-30: rgb(232 239 234 / .3); --mist-12: rgb(232 239 234 / .12); --sun-400: #E8B04B; --sun-200: #F6DBA4;
  --line: rgb(255 255 255 / .1);

  /* IUCN: the Red List's own colours, always paired with the code and label (never colour alone). */
  --iucn-LC: #60C659; --iucn-NT: #CCE226; --iucn-VU: #F9E814; --iucn-EN: #FC7F3F; --iucn-CR: #D81E05;
  --iucn-EW: #542344; --iucn-EX: #000; --iucn-DD: #D1D1C6;

  /* Type: Fraunces (display, optical sizes) + Inter (UI). Fluid sizes, rem-based so text zoom works. */
  --display: "Fraunces", Georgia, serif; --ui: "Inter", system-ui, sans-serif;
  --t-hero: clamp(3.25rem, 1.6rem + 7.4vw, 9.5rem);    /* species / home hero */
  --t-h1: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);       /* chapter titles */
  --t-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --t-lead: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);  /* one-sentence findings */
  --t-body: 1.0625rem;                                  /* 17 px: iOS body size */
  --t-small: .875rem; --t-micro: .75rem;
  --track-hero: -.035em; --track-h1: -.02em; --track-kicker: .16em; /* tighter tracking as size grows */

  /* Space (rem) and radii (concentric: inner = outer - padding). */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 5rem; --s9: 8rem;
  --r-card: 1.25rem; --r-inner: .75rem; --r-pill: 999px;
  --measure: 38rem; --wide: 76rem;

  /* Motion. Springs as linear() curves: critically damped (damping 1.0, response ~0.35 s) for UI,
     a little bounce (damping 0.8) for things a gesture flung. Only transform and opacity animate. */
  --spring: linear(0, .087 2.4%, .302 6.2%, .552 11%, .743 16.3%, .866 21.8%, .938 28%, .975 35%, .992 43%, 1 55%, 1);
  --spring-bouncy: linear(0, .16 5%, .55 14%, .87 23%, 1.03 32%, 1.06 39%, 1.03 49%, 1 60%, .995 72%, 1);
  --d-ui: 420ms; --d-reveal: 700ms; --d-hero: 1200ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* Material: translucent "glass" over photos; solid fallbacks below. */
  --glass-bg: rgb(10 20 15 / .55); --glass-border: rgb(255 255 255 / .14);
  --glass-blur: blur(20px) saturate(150%);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--t-body)/1.6 var(--ui); color: var(--mist-100); background: var(--canopy-950);
  -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sun-400); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--s4); top: -4rem; z-index: 100; padding: var(--s3) var(--s4); border-radius: var(--r-inner);
  background: var(--sun-400); color: var(--canopy-950); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s4); }

.kicker { margin: 0; font: 600 var(--t-micro)/1.2 var(--ui); letter-spacing: var(--track-kicker); text-transform: uppercase;
  color: var(--fern-300); }
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgb(14 26 20 / .94); } }

/* Press feedback on pointer-down (not release): every pressable thing sinks slightly. */
.pressable { transition: transform var(--d-ui) var(--spring), background-color 160ms, border-color 160ms; }
.pressable:active { transform: scale(.96); transition-duration: 80ms; }

.chip { display: inline-flex; align-items: center; gap: var(--s2); padding: .3rem .7rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); font: 500 var(--t-small)/1.2 var(--ui); white-space: nowrap; }
.iucn { display: inline-flex; align-items: center; gap: .45rem; font: 600 var(--t-micro)/1 var(--ui); letter-spacing: .04em; }
.iucn b { display: inline-grid; place-items: center; min-width: 2.1em; height: 1.7em; padding: 0 .35em; border-radius: .4em;
  color: #0B1410; font-weight: 700; }
.iucn b[data-code="CR"], .iucn b[data-code="EW"], .iucn b[data-code="EX"] { color: #fff; }

.credit { font: 400 var(--t-micro)/1.35 var(--ui); color: var(--mist-60); }
.credit a { color: inherit; text-decoration-color: var(--mist-30); text-underline-offset: 2px; }
.credit a:hover { color: var(--mist-100); }

/* Accessibility preferences (Apple: Reduce Motion, Reduce Transparency, Increase Contrast). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(14 26 20 / .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --mist-60: rgb(232 239 234 / .85); --mist-30: rgb(232 239 234 / .6); --line: rgb(255 255 255 / .35);
    --glass-border: rgb(255 255 255 / .5); }
}