/* =============================================================
   DESIGN TOKENS — Contrato visual de Clínica Veterinaria Huellitas
   -----------------------------------------------------------------
   Cambia aqui un valor y se actualiza en TODO el sitio.
   La escala se llama "escala de mascota": radios suaves y redondeados.
   ============================================================= */

:root {
  /* ============ PALETA DE MARCA (tomada del logotipo) ============ */
  --color-primary: #e91e8c; /* rosa Huellitas — marca */
  --color-primary-dark: #b5166d; /* hover / acentos fuertes */
  --color-primary-light: #fdebf5; /* fondos suaves rosados */
  --color-secondary: #22b8b5; /* turquesa — confianza */
  --color-secondary-dark: #17908d;
  --color-secondary-light: #e9fbfa; /* fondos suaves turquesa */
  --color-accent: #f4b62a; /* amarillo — energia y alertas */
  --color-accent-light: #fdf4d8;
  --background-btn-facebook: #1877f2;
  --background-btn-instagram: #e1306c;
  --background-btn-tiktok: #111111;

  /* ============ NEUTROS ============ */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-background: #fffafa; /* fondo general, tono muy calido */
  --color-surface: #ffffff; /* tarjetas y bloques */
  --color-text: #263238; /* textos principales */
  --color-muted: #667085; /* textos secundarios */
  --color-border: #e5e7eb; /* bordes suaves */

  /* ============ SEMANTICOS ============ */
  --color-success: #1a9e7c;
  --color-error: #e03131;
  --color-error-light: #fdeaea;
  --color-info: var(--color-secondary);

  /* ============ TIPOGRAFIA ============ */
  --font-title: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", Arial, sans-serif;

  /* Escala tipografica fluida (vista en detalle en main.css) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;

  /* ============ CONTENEDOR Y LAYOUT ============ */
  --container-width: 1200px;
  --header-height: 76px;

  /* ============ RADIOS (esquinas suaves de la marca) ============ */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ============ ESCALA DE ESPACIADO (basada en 0.25rem) ============ */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ============ SOMBRAS ============ */
  --shadow-soft: 0 10px 25px rgba(38, 50, 56, 0.08);
  --shadow-md: 0 16px 40px rgba(38, 50, 56, 0.12);
  --shadow-lg: 0 24px 60px rgba(233, 30, 140, 0.18);
  --shadow-focus: 0 0 0 4px rgba(233, 30, 140, 0.25); /* accesibilidad */

  /* ============ MOVIMIENTO ============ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ============ PUNTOS DE QUIEBRE (breakpoints) ============ */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}