/* ============================================================
   hormiga · design tokens
   Sistema de diseño de hormiga.ar — pegá esto en :root y todas
   las apps (calculadora, sincronizador, portada) heredan la
   misma cara. Tema oscuro, monoespaciado, violeta monocromático.
   ============================================================ */

:root {
  /* ---- neutros · fondos fríos (de atrás hacia adelante) ---- */
  --bg:            #15151e;  /* fondo base de la app           */
  --surface:       #1c1c28;  /* tarjetas, paneles              */
  --elevated:      #25252f;  /* inputs, barras, chips elevados */
  --border:        #2d2d40;  /* divisores y bordes             */
  --border-strong: #3a3a55;  /* borde marcado / hover          */

  /* ---- texto ---- */
  --text:  #e9e9f2;   /* texto principal     · 15.0:1 sobre bg · AAA */
  --muted: #7e7e98;   /* texto secundario    ·  4.6:1 sobre bg · AA  */
  --faint: #565676;   /* solo deshabilitado / decorativo (NO leer)   */

  /* ---- violeta · ÚNICO color de marca (monocromático) ---- */
  --violet-tint: rgba(196,155,234,0.10); /* fondos sutiles, hover suave */
  --violet-300:  #d6bdf0;  /* hover de links / texto violeta claro */
  --violet-400:  #c49bea;  /* ★ texto-acento, íconos, links · 8.0:1 AAA */
  --violet-500:  #b07fe0;  /* relleno de botón primario            */
  --violet-600:  #9f6fd0;  /* botón primario :active               */
  --violet-700:  #7d50b2;  /* bordes, foco, numeración, chevrons   */
  --on-violet:   #15151e;  /* texto/ícono SOBRE relleno violeta (casi negro) */

  /* ---- semánticos · SOLO para estados (no son colores de marca) ---- */
  --success: #5ec98c;  /* ok, sincronizado, ganancia */
  --error:   #e8716e;  /* error, sin stock           */
  --warning: #e7b24f;  /* alerta, pausado            */
  --info:    #6ea9e6;  /* informativo                */

  /* ---- marco de ventana (dispositivo de marca) ---- */
  --win-red:    #ed6a5e;
  --win-yellow: #f4bf4f;
  --win-green:  #61c554;

  /* ---- tipografía ---- */
  --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* TODA la interfaz y datos */
  --font-wordmark: 'Baloo 2', system-ui, sans-serif;  /* SOLO el wordmark del logo "hormiga" */

  --text-display: 48px;  /* hero / portada              */
  --text-h1:      32px;
  --text-h2:      24px;
  --text-h3:      18px;
  --text-base:    15px;  /* cuerpo                      */
  --text-sm:      13px;  /* notas, ayudas               */
  --text-label:   11px;  /* etiquetas MAYÚS, +1.5 track */

  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

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

  /* ---- espaciado · escala base 4 ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  /* ---- forma ---- */
  --radius-sm:   6px;
  --radius-md:   8px;   /* botones, inputs          */
  --radius-lg:   12px;  /* tarjetas                 */
  --radius-pill: 999px; /* chips, badges            */
  --container:   1120px;/* ancho máx de contenido   */

  /* ---- foco visible (OBLIGATORIO en todo control interactivo) ---- */
  --focus-outline: 2px solid var(--violet-400);
  --focus-ring:    0 0 0 4px rgba(196,155,234,0.18);

  /* ---- elevación ---- */
  --shadow-card: 0 20px 50px -30px rgba(0,0,0,0.8);

  /* ---- números: usar SIEMPRE cifras tabulares en datos/plata ---- */
  --num: tabular-nums;   /* aplicar como: font-variant-numeric: var(--num); */
}

/* Foco visible — accesibilidad. No lo quites. */
*:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Respeto por quienes reducen movimiento (cursor que parpadea, transiciones, etc.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}