/* Pattrack — Color tokens
   Base palette + semantic aliases. All values from the brand spec. */

:root {
  /* ---- Brand: Teal (primary) ---- */
  --teal-700: #009686; /* oscuro / pressed */
  --teal-500: #00B4A0; /* primario */
  --teal-300: #33C6B3; /* claro / hover-light */
  --teal-050: #E6F8F6; /* muy claro / surfaces */

  /* ---- Brand: Coral (accent) ---- */
  --coral-600: #E55A2E; /* oscuro / pressed */
  --coral-500: #FF7043; /* acento */

  /* ---- Ink / Neutrals ---- */
  --navy-900:  #0F1C2E; /* tinta / titulares */
  --gray-500:  #64748B; /* texto secundario */
  --gray-300:  #CBD5E1; /* bordes, divisores */
  --gray-100:  #E2E8F0; /* fondos sutiles */
  --bg-light:  #F5F7FA; /* fondo claro de página */
  --white:     #FFFFFF;

  /* ---- Semantic: status ---- */
  --success-500: #10B981; /* verde éxito */
  --live-500:    var(--coral-500); /* "A 5 minutos" / alertas */

  /* =========================================================
     Semantic aliases — prefer these in components
     ========================================================= */
  --color-primary:        var(--teal-500);
  --color-primary-hover:   var(--teal-300);
  --color-primary-pressed: var(--teal-700);
  --color-primary-soft:    var(--teal-050);
  --on-primary:           var(--white);

  --color-accent:         var(--coral-500);
  --color-accent-pressed: var(--coral-600);
  --on-accent:            var(--white);

  --color-success:        var(--success-500);

  --text-strong:   var(--navy-900); /* titulares, alta jerarquía */
  --text-body:     #334155;          /* cuerpo principal */
  --text-muted:    var(--gray-500);  /* secundario / captions */
  --text-on-dark:  var(--white);

  --surface-page:  var(--bg-light);
  --surface-card:  var(--white);
  --surface-soft:  var(--teal-050);
  --surface-dark:  var(--navy-900);

  --border-subtle: var(--gray-100);
  --border-default: var(--gray-300);
}