/* Arbopedia design tokens.
   Ported verbatim from the design system. Values are specific, not snapped to a
   grid — copy them exactly rather than rounding to the nearest 4. */

:root {
  /* — Base palette — */
  --crema: #FFF1D6;        /* fondo: every page background */
  --noche: #10201A;        /* ink: text, borders, pressed states */
  --selva: #064434;        /* deep green: nav, footer, taxonomy band */
  --verde: #0B6B4F;        /* mid green: ficha header, links, map dots */
  --verde-claro: #17A06F;  /* light green: canopy highlights only */
  --ambar: #FFC300;        /* THE accent: CTAs, focus ring, bloom bars, pressed text */

  /* — Species accent colours (card backgrounds, one per species) — */
  --cielo: #17B9D6;
  --naranja: #E2822A;
  --rosa: #FF5FA2;
  --colorin: #FF5A3C;      /* AA-safe lift of --rojo for card backgrounds */
  --rojo: #F0432B;         /* UICN danger only — 4.46:1, NEVER under body text */
  --morado: #6C2BD9;
  --ciruela: #3D1B58;

  /* — Hero sky (portada only) — */
  --cielo-alto: #0E86C4;
  --sol-1: #FFE7A8;
  --sol-2: #FFD34D;
  --sol-3: #FFB01F;

  /* — Ink at opacity. There are no greys: every hairline is ink, faded. — */
  --linea-fuerte: #10201A;
  --linea-suave: rgba(16, 32, 26, .18);
  --borde-pill: rgba(16, 32, 26, .4);
  --relleno-suave: rgba(16, 32, 26, .09);
  --crema-linea: rgba(255, 241, 214, .35);
  --crema-borde: rgba(255, 241, 214, .45);

  /* — Families — */
  --font-display: "Alfa Slab One", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Body — */
  --text-size: 17px;
  --text-line: 1.55;

  /* — Display headings — */
  --display-line: .84;
  --display-tracking: -.02em;
  --display-h1: clamp(3.2rem, 9vw, 7rem);
  --display-card: 26px;

  /* — Section titles: Archivo EXPANDED — */
  --title-stretch: 118%;
  --title-weight: 900;
  --title-tracking: -.02em;
  --title-line: .95;

  /* — Micro labels: Archivo CONDENSED. Smaller size means wider tracking. — */
  --label-stretch: 80%;
  --label-weight: 800;
  --label-size: 10.5px;
  --label-tracking: .14em;

  /* — Layout containers — */
  --ancho-ficha: 1180px;
  --ancho-directorio: 1320px;
  --canal: 24px;
  --riel: 284px;
  --medida: 56ch;
  --prosa: 62ch;

  /* — Spacing scale — */
  --e-1: 4px;
  --e-2: 7px;
  --e-3: 10px;
  --e-4: 14px;
  --e-5: 18px;
  --e-6: 22px;
  --e-7: 26px;
  --e-8: 34px;
  --e-9: 48px;
  --e-10: 70px;

  /* — Fixed chrome — */
  --alto-nav: 58px;
  --sticky-offset: 78px;

  /* — Radii — */
  --radio-tarjeta: 18px;
  --radio-suave: 8px;
  --radio-pill: 999px;

  /* — Borders — */
  --borde-fuerte: 2px solid var(--linea-fuerte);
  --borde-pill-resting: 2px solid var(--borde-pill);

  /* — The house shadow: a hard slab offset AND a soft throw. Never a plain blur. — */
  --sombra-tarjeta: 0 10px 0 -2px rgba(16, 32, 26, .16), 0 22px 34px -18px rgba(16, 32, 26, .7);
  --sombra-plato: 0 12px 0 -4px rgba(6, 68, 52, .28), 0 30px 46px -26px rgba(16, 32, 26, .5);
  --sombra-capsula: 0 12px 0 -6px rgba(6, 68, 52, .22);
  --sombra-movil: 0 8px 0 -2px rgba(16, 32, 26, .16), 0 18px 28px -16px rgba(16, 32, 26, .6);

  /* — Focus — */
  --anillo-foco: 3px solid var(--ambar);
  --anillo-offset: 3px;

  /* — Motion. Cards overshoot on purpose. — */
  --transicion-tarjeta: transform .22s cubic-bezier(.2, .9, .3, 1.2);
  --hover-tarjeta: translateY(-10px) rotate(-.7deg);
  --hover-boton: translateY(-2px);
  --transicion-boton: transform .15s ease;
}