/* ============================================================
   Mascotero — tokens
   Paleta de marca: Magicaldays Petshop (logo rosa/magenta +
   celeste). Mismo mundo de "libreta sanitaria" — papel, tinta,
   sellos — pero con los colores del cliente.
   Los nombres de variable quedaron como estaban (verde-*, ocre)
   porque los usa media app; lo que cambió es a qué color apuntan.
   ============================================================ */

:root {
  /* --- Color ------------------------------------------------ */
  --verde-profundo: #4A0E38;   /* estructural: header, texto principal — ciruela oscuro de la marca */
  --verde-medio:    #0E86A8;   /* acentos secundarios, enlaces, positivo — celeste del isotipo, oscurecido para contraste */
  --papel:          #FFF8FB;   /* fondo general */
  --papel-hueso:    #FCEEF4;   /* superficies elevadas, cards */
  --ocre:           #E01977;   /* acción primaria, sellos — rosa vivo del logo */
  --coral:          #E2664B;   /* alertas, requiere revisión */
  --tinta:          #26121D;   /* texto */
  --tinta-suave:    #8C7480;   /* texto secundario */
  --linea:          #EAD3E0;   /* bordes hairline */

  /* Semáforo real: "verde-medio" es celeste de marca, no sirve para
     decir bien/mal de un vistazo. Estos dos son un verde y un rojo
     de verdad, para decisiones — disponible/pagado/listo vs.
     completo/ausente/falta pagar — donde el color tiene que hablar
     antes que el texto. */
  --verde-exito:       #1E8E5A;
  --verde-exito-oscuro: #146B43;  /* texto sobre fondo tenue, más contraste */
  --verde-exito-tenue: #DCF3E7;
  --rojo:              #D0342C;
  --rojo-oscuro:       #97231C;   /* texto sobre fondo tenue, más contraste */
  --rojo-tenue:        #FBDBD8;

  /* Derivados (mismo mundo, nada nuevo) */
  --verde-tenue:    #DFF4F8;   /* bg positivo / confirmado — celeste tenue */
  --ocre-tenue:     #FCE1EF;   /* bg pendiente / atención — rosa tenue */
  --coral-tenue:    #FBE3DC;
  --papel-hundido:  #F7E0EC;   /* superficies bajo el papel: inputs, tracks */
  --blanco:         #FFFFFF;

  /* --- Tipografía ------------------------------------------- */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --data:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* --- Escala ----------------------------------------------- */
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem;
  --t-lg: 1.25rem; --t-xl: 1.75rem; --t-2xl: 2.5rem; --t-3xl: 3.5rem;

  /* --- Espaciado (base 4) ----------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* --- Forma ------------------------------------------------ */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-full: 999px;
  --sombra: 0 1px 2px rgba(38,18,29,.06), 0 8px 24px rgba(38,18,29,.05);
  --sombra-alta: 0 2px 4px rgba(38,18,29,.08), 0 18px 44px rgba(38,18,29,.12);
  --hairline: 1px solid var(--linea);

  /* --- Movimiento ------------------------------------------- */
  --tr: 180ms cubic-bezier(.2,.7,.3,1);

  /* --- Layout ----------------------------------------------- */
  --ancho: 760px;          /* columna de lectura del cliente */
  --ancho-admin: 1180px;
  --header-h: 60px;
  --tabbar-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --tr: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}