/* ============================================================
   SISTEMA DE TOKENS — Smart Fit Coach
   Fuente única de verdad para colores, tipografía y estilos.
   Cambia un valor aquí y se actualiza en TODA la app.
   ============================================================ */

:root {
    /* ---------- MARCA ---------- */
    --sf-amarillo:        #FBBA00;   /* amarillo Smart Fit */
    --sf-amarillo-suave:  #FAF7EF;   /* fondo tenue amarillo */
    --sf-amarillo-borde:  #F0E6C8;
    --sf-negro:           #111114;

    /* ---------- NEUTROS ---------- */
    --sf-blanco:          #FFFFFF;
    --sf-fondo:           #F2F2EF;   /* fondo de página (como el index) */
    --sf-superficie:      #FFFFFF;   /* fondo de tarjetas */
    --sf-superficie-2:    #EDEDED;   /* tarjetas grises */
    --sf-linea:           #E4E4E4;   /* bordes/separadores */
    --sf-linea-suave:     #F0F0F0;

    /* ---------- TEXTO ---------- */
    --sf-texto:           #111114;   /* texto principal */
    --sf-texto-2:         #444444;   /* texto secundario */
    --sf-texto-3:         #6B6B70;   /* texto atenuado / labels */
    --sf-texto-4:         #888888;   /* placeholders / hints */

    /* ---------- ESTADO ---------- */
    --sf-exito:           #1A7A3A;   /* verde (activo/positivo) */
    --sf-exito-bg:        #E6F6EA;
    --sf-alerta:          #C07F00;   /* ámbar (suspendido) */
    --sf-alerta-bg:       #FBE8B0;
    --sf-error:           #B42318;   /* rojo (cancelado/error) */
    --sf-error-bg:        #FDE8E8;
    --sf-error-borde:     #F5B5B5;

    /* ---------- TIPOGRAFÍA ---------- */
    --sf-font:            "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --sf-peso-normal:     400;
    --sf-peso-medio:      600;
    --sf-peso-bold:       700;
    --sf-peso-black:      800;

    --sf-fs-xs:           12px;
    --sf-fs-sm:           14px;
    --sf-fs-md:           16px;
    --sf-fs-lg:           19px;
    --sf-fs-xl:           22px;
    --sf-fs-2xl:          30px;
    --sf-fs-3xl:          40px;

    /* ---------- RADIOS ---------- */
    --sf-radio-sm:        8px;
    --sf-radio-md:        12px;
    --sf-radio-lg:        16px;
    --sf-radio-pill:      40px;

    /* ---------- ESPACIADO ---------- */
    --sf-esp-1:           8px;
    --sf-esp-2:           16px;
    --sf-esp-3:           24px;
    --sf-esp-4:           40px;

    /* ---------- SOMBRAS ---------- */
    --sf-sombra:          0 2px 12px rgba(0,0,0,.05);
    --sf-sombra-fuerte:   0 10px 40px rgba(0,0,0,.10);

    /* ============================================================
       ALIAS DE COMPATIBILIDAD
       Mapea los nombres antiguos a los tokens nuevos, para que el
       código existente siga funcionando sin reescribirlo todo.
       ============================================================ */
    --amarillo:  var(--sf-amarillo);
    --negro:     var(--sf-negro);
    --gris-tx:   var(--sf-texto-3);
    --gris-bg:   var(--sf-superficie-2);
    --linea:     var(--sf-linea);
}