/* =========================================================================
 * WSSF · Design Tokens
 * Sistema de variables CSS para todo el portal Sascha Fitness Distribuidores.
 *
 * Filosofía: tokens semánticos > tokens visuales.
 * Cualquier override de marca se hace cambiando estos valores, no buscando
 * por archivo.
 * ========================================================================= */

:root {
    /* ----- Color · Paleta WSSF · Gris / Negro / Blanco -----
     * Monocromática premium (estilo Apple / Linear / Vercel).
     * El "primary" funciona como acento de acción (botones, focus, links).
     * Para cambiar marca a otro color en el futuro: solo editar primary-500/600/700. */
    --sf-primary-50:  #F5F5F5;
    --sf-primary-100: #E5E5E5;
    --sf-primary-200: #D4D4D4;
    --sf-primary-300: #A3A3A3;
    --sf-primary-400: #525252;
    --sf-primary-500: #1A1A1A;  /* base · negro casi puro */
    --sf-primary-600: #0F0F0F;  /* hover · más oscuro */
    --sf-primary-700: #000000;  /* active · negro puro */
    --sf-primary-800: #000000;
    --sf-primary-900: #000000;

    /* ----- Color · Neutros (escala gris) ----- */
    --sf-bg:          #FFFFFF;       /* blanco puro como base */
    --sf-bg-alt:      #EDEDED;       /* gris claro · backgrounds secundarios */
    --sf-card:        #FFFFFF;
    --sf-border:      #C7C7C7;       /* gris medio claro · bordes principales */
    --sf-border-soft: #DCDCDC;       /* gris claro · bordes sutiles */
    --sf-text:        #0A0A0A;       /* texto principal · casi negro */
    --sf-text-muted:  #595959;       /* texto secundario · gris medio */
    --sf-text-subtle: #6B6B6B;       /* texto terciario · gris medio claro */
    --sf-text-invert: #FFFFFF;       /* sobre fondo oscuro */

    /* ----- Color · Estados (semánticos) ----- */
    --sf-success:     #1F8E3D;
    --sf-success-bg:  #E8F5EC;
    --sf-warning:     #B07B00;
    --sf-warning-bg:  #FBF3E0;
    --sf-error:       #C00000;
    --sf-error-bg:    #FBEAEA;
    --sf-info:        #1F4FE8;
    --sf-info-bg:     #E8EEFC;

    /* ----- Tipografía ----- */
    --sf-font-sans:   'Inter Variable', 'Inter', system-ui, -apple-system,
                      'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sf-font-mono:   'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

    /* Escala tipográfica B2B (mejor legibilidad).
     * +3-4px sobre la escala "densa" original — texto cómodo de leer
     * sin perder densidad de información en tablas. */
    --sf-text-xs:     14px;
    --sf-text-sm:     16px;
    --sf-text-base:   17px;
    --sf-text-lg:     19px;
    --sf-text-xl:     22px;
    --sf-text-2xl:    26px;
    --sf-text-3xl:    32px;
    --sf-text-4xl:    40px;

    /* Pesos */
    --sf-fw-regular:  400;
    --sf-fw-medium:   500;
    --sf-fw-semibold: 600;
    --sf-fw-bold:     700;
    --sf-fw-extra:    800;

    /* Line-height */
    --sf-lh-tight:    1.2;
    --sf-lh-snug:     1.35;
    --sf-lh-normal:   1.5;
    --sf-lh-relaxed:  1.65;

    /* ----- Espaciado (escala base 4) ----- */
    --sf-space-0:     0;
    --sf-space-1:     4px;
    --sf-space-2:     8px;
    --sf-space-3:     12px;
    --sf-space-4:     16px;
    --sf-space-5:     20px;
    --sf-space-6:     24px;
    --sf-space-8:     32px;
    --sf-space-10:    40px;
    --sf-space-12:    48px;
    --sf-space-16:    64px;
    --sf-space-20:    80px;
    --sf-space-24:    96px;

    /* ----- Radios ----- */
    --sf-radius-xs:   4px;
    --sf-radius-sm:   6px;     /* botones, inputs */
    --sf-radius-md:   10px;    /* cards */
    --sf-radius-lg:   16px;    /* modales, hero */
    --sf-radius-xl:   24px;
    --sf-radius-pill: 999px;   /* chips, badges */

    /* ----- Sombras ----- */
    --sf-shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
    --sf-shadow-sm:   0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --sf-shadow-md:   0 4px 12px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --sf-shadow-lg:   0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
    --sf-shadow-xl:   0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

    /* ----- Transiciones ----- */
    --sf-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --sf-duration-fast:   120ms;
    --sf-duration-normal: 200ms;
    --sf-duration-slow:   400ms;

    /* ----- Z-index ----- */
    --sf-z-base:      1;
    --sf-z-dropdown:  100;
    --sf-z-sticky:    200;
    --sf-z-modal-bg:  900;
    --sf-z-modal:     1000;
    --sf-z-toast:     1100;
    --sf-z-debug:     9999;

    /* ----- Layout ----- */
    --sf-max-width:   1280px;
    --sf-content-width: 720px;
    --sf-touch-target: 36px;       /* desktop denso · mobile lo eleva a 44px */
    --sf-touch-target-mobile: 44px;

    /* ----- Focus ring (accesibilidad) ----- */
    --sf-focus-ring:  0 0 0 3px rgba(0, 0, 0, 0.20);
}

/* En mobile elevar touch-target a 44px (Apple HIG mínimo). */
@media (max-width: 767px) {
    :root { --sf-touch-target: 44px; }
}

/* =========================================================================
 * Dark mode (futuro · activable con [data-theme="dark"] en <html>)
 * ========================================================================= */
[data-theme="dark"] {
    --sf-bg:          #0A0A0A;
    --sf-bg-alt:      #141414;
    --sf-card:        #1A1A1A;
    --sf-border:      #2A2A2A;
    --sf-border-soft: #1F1F1F;
    --sf-text:        #F0F0F0;
    --sf-text-muted:  #A8A8A8;
    --sf-text-subtle: #6B6B6B;
}

/* Respeto a la preferencia del sistema si no hay override explícito. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sf-bg:          #0A0A0A;
        --sf-bg-alt:      #141414;
        --sf-card:        #1A1A1A;
        --sf-border:      #2A2A2A;
        --sf-border-soft: #1F1F1F;
        --sf-text:        #F0F0F0;
        --sf-text-muted:  #A8A8A8;
        --sf-text-subtle: #6B6B6B;
    }
}