/*
 * tokens.css — Gestionator Design System v3.0
 * Fuente única de verdad para colores, tipografía, espaciado, radios, sombras y movimiento.
 * Cargar antes que cualquier otro CSS del proyecto (excepto Bootstrap).
 * No modificar valores sin actualizar también gestionator-sistema-diseno-para-refactoring-ui.md.
 */

:root {

  /* ============================================================
     COLOR — PRIMARIO (Teal)
     Rol: marca y acción. Botones, enlaces, focus rings, CTAs.
  ============================================================ */
  --color-primary-50:  #F0FDFA;
  --color-primary-100: #CCFBF1;
  --color-primary-200: #99F6E4;
  --color-primary-300: #5EEAD4;
  --color-primary-400: #2DD4BF;
  --color-primary-500: #14B8A6;
  --color-primary-600: #0D9488;   /* ★ Acción principal */
  --color-primary-700: #0F766E;   /* Hover/pressed */
  --color-primary-800: #115E59;
  --color-primary-900: #134E4A;

  /* ============================================================
     COLOR — NEUTROS (Slate)
     Rol: texto, bordes, fondos, estructura.
  ============================================================ */
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;

  /* ============================================================
     COLOR — SEMÁNTICOS
     IMPORTANTE: green ≠ emerald (emerald = sector Salud).
                 blue ≠ sky (sky = sector Motor).
  ============================================================ */
  --color-success-bg:   #DCFCE7;
  --color-success-main: #16A34A;
  --color-success-text: #15803D;

  --color-warning-bg:   #FEF3C7;
  --color-warning-main: #D97706;
  --color-warning-text: #B45309;

  --color-danger-bg:    #FEE2E2;
  --color-danger-main:  #DC2626;
  --color-danger-text:  #B91C1C;

  --color-info-bg:      #DBEAFE;
  --color-info-main:    #2563EB;
  --color-info-text:    #1D4ED8;

  /* ============================================================
     COLOR — SECTORIALES
     Solo los 3 del logo. El resto de sectores: chip slate-100.
  ============================================================ */
  /* Belleza · Pink */
  --color-sector-belleza-50:  #FDF2F8;
  --color-sector-belleza-100: #FCE7F3;
  --color-sector-belleza-200: #FBCFE8;
  --color-sector-belleza-500: #EC4899;
  --color-sector-belleza-600: #DB2777;
  --color-sector-belleza-700: #BE185D;
  --color-sector-belleza-900: #831843;

  /* Salud / Mascotas · Emerald */
  --color-sector-salud-50:  #ECFDF5;
  --color-sector-salud-100: #D1FAE5;
  --color-sector-salud-200: #A7F3D0;
  --color-sector-salud-500: #10B981;
  --color-sector-salud-600: #059669;
  --color-sector-salud-700: #047857;
  --color-sector-salud-900: #064E3B;

  /* Motor · Sky */
  --color-sector-motor-50:  #F0F9FF;
  --color-sector-motor-100: #E0F2FE;
  --color-sector-motor-200: #BAE6FD;
  --color-sector-motor-500: #0EA5E9;
  --color-sector-motor-600: #0284C7;
  --color-sector-motor-700: #0369A1;
  --color-sector-motor-900: #0C4A6E;

  /* ============================================================
     ALIASES SEMÁNTICOS DE COLOR
     Usar estos en componentes, no los valores raw anteriores.
  ============================================================ */
  --color-text-primary:    var(--color-neutral-900);   /* h1-h3, body enfático */
  --color-text-secondary:  var(--color-neutral-600);   /* subtítulos, descripciones */
  --color-text-tertiary:   var(--color-neutral-500);   /* metadata, captions */
  --color-text-disabled:   var(--color-neutral-400);   /* placeholders, disabled */
  --color-text-on-brand:   #FFFFFF;                    /* texto sobre fondos primarios */
  --color-text-link:       var(--color-primary-600);
  --color-text-link-hover: var(--color-primary-700);

  --color-bg-page:         #FFFFFF;
  --color-bg-surface:      #FFFFFF;                    /* cards, modales */
  --color-bg-secondary:    var(--color-neutral-50);    /* fondos alternativos */
  --color-bg-tertiary:     var(--color-neutral-100);   /* sidebar, filas alternas */
  --color-bg-brand-subtle: var(--color-primary-50);    /* banners de marca */
  --color-bg-overlay:      rgba(15, 23, 42, 0.5);      /* overlay de modales */

  --color-border-subtle:   var(--color-neutral-200);   /* divisores, bordes sutiles */
  --color-border-default:  var(--color-neutral-300);   /* inputs, cards */
  --color-border-strong:   var(--color-neutral-400);   /* hover de inputs */
  --color-border-brand:    var(--color-primary-500);   /* bordes de marca */
  --color-border-focus:    var(--color-primary-500);   /* focus ring */

  --color-action-primary:         var(--color-primary-600);
  --color-action-primary-hover:   var(--color-primary-700);
  --color-action-primary-pressed: var(--color-primary-800);

  /* ============================================================
     TIPOGRAFÍA
  ============================================================ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;   /* recomendado para texto corrido en español */

  /* ============================================================
     ESPACIADO (base 4px)
  ============================================================ */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   8px;
  --space-4:   12px;
  --space-5:   16px;
  --space-6:   20px;
  --space-7:   24px;
  --space-8:   32px;
  --space-9:   40px;
  --space-10:  48px;
  --space-11:  64px;
  --space-12:  80px;
  --space-13:  96px;

  /* ============================================================
     BORDER RADIUS
  ============================================================ */
  --radius-sm:   6px;
  --radius-md:   8px;    /* por defecto — botones, inputs */
  --radius-lg:   12px;   /* cards estándar */
  --radius-xl:   16px;   /* cards grandes, modales */
  --radius-2xl:  20px;   /* hero cards */
  --radius-full: 9999px; /* pills, avatares */

  /* ============================================================
     SOMBRAS (elevación)
     Uso: xs=botones/inputs · sm=cards · md=hover/dropdowns ·
          lg=tooltips/popovers · xl=modales · 2xl=modales críticos
  ============================================================ */
  --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 16px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 20px 24px -4px rgba(15, 23, 42, 0.08), 0 8px 8px -4px rgba(15, 23, 42, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.20);

  /* ============================================================
     MOVIMIENTO Y ANIMACIÓN
  ============================================================ */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    350ms;

  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);    /* uso general */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);       /* entradas */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);       /* salidas */
  --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy puntual */
}

/* ============================================================
   REDUCCIÓN DE MOVIMIENTO (accesibilidad obligatoria)
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 50ms !important;
    transition-duration: 50ms !important;
  }
}