/* ==========================================================================
   GUÍA FELINA — DESIGN TOKENS
   Sistema de diseño: "Guía de campo felina"
   No editar valores de color/tipografía/espaciado fuera de este archivo.
   ========================================================================== */

:root {

  /* ---------- COLOR — Paleta base ---------- */
  --color-ink:         #1B2420; /* texto principal */
  --color-ink-soft:    #3A4540; /* texto secundario sobre fondo claro */
  --color-paper:       #F5F6F2; /* fondo base del sitio */
  --color-paper-alt:   #ECEEE7; /* fondo alterno (secciones, tarjetas) */
  --color-moss:        #2F4F3E; /* marca principal */
  --color-moss-dark:   #1F3A2C; /* hover / estados activos de marca */
  --color-amber:       #D9A441; /* acento único — CTAs, foco interactivo */
  --color-amber-dark:  #B9852E; /* hover de acento */
  --color-stone-blue:  #5B7C99; /* enlaces internos, info secundaria */
  --color-ash:         #8A9086; /* texto terciario, metadatos */
  --color-border:      #DCE0D6; /* bordes, separadores */
  --color-alert:       #B4483A; /* alertas de salud / urgencias — uso restringido */
  --color-white:       #FFFFFF;

  /* ---------- COLOR — Sistema de silos (wayfinding) ---------- */
  /* Cada silo temático tiene un tono derivado de la paleta base.
     Se usa en: borde superior de tarjeta, tag de categoría, breadcrumb activo. */
  --silo-razas:          #6B8F71;
  --silo-alimentacion:   #C98A3E;
  --silo-salud:          #35665F;
  --silo-cuidados:       #7C9A6B;
  --silo-comportamiento: #5B7C99;
  --silo-gatitos:        #E0B15C;
  --silo-senior:         #8A7196;
  --silo-adopcion:       #B96B4F;
  --silo-productos:      #6B7F8F;
  --silo-blog:           #A85C6B;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Escala modular (ratio 1.25) */
  --fs-xs:   0.75rem;   /* 12px — metadatos, labels */
  --fs-sm:   0.875rem;  /* 14px — texto auxiliar */
  --fs-base: 1rem;      /* 16px — cuerpo de texto */
  --fs-md:   1.125rem;  /* 18px — cuerpo destacado */
  --fs-lg:   1.25rem;   /* 20px — H4 */
  --fs-xl:   1.563rem;  /* 25px — H3 */
  --fs-2xl:  1.953rem;  /* 31px — H2 */
  --fs-3xl:  2.441rem;  /* 39px — H1 sección */
  --fs-4xl:  3.052rem;  /* 49px — H1 home / pilar */

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- ESPACIADO (escala modular) ---------- */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ---------- LAYOUT ---------- */
  --container-max:  1280px;
  --container-prose: 720px; /* ancho óptimo de lectura para artículos */
  --radius-sm: 4px;
  --radius-md: 8px;
  --border-width: 1px;

  /* ---------- SOMBRAS (uso mínimo, solo elevación funcional) ---------- */
  --shadow-card: 0 1px 3px rgba(27, 36, 32, 0.08);
  --shadow-menu: 0 4px 16px rgba(27, 36, 32, 0.12);

  /* ---------- TRANSICIONES ---------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ---------- Z-INDEX ---------- */
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 300;
}

/* Respeto a preferencias de movimiento reducido — accesibilidad WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}