/*
 * ALPHA FITNESS — DESIGN TOKENS
 * ═══════════════════════════════════════════════════════════════════════════
 * Single source of truth para TODOS los valores visuales del sistema.
 *
 * REGLAS DE ORO:
 *   1. NUNCA hardcodees colores/spacing/etc. en otros CSS. Usá tokens.
 *   2. Si necesitás un valor que no existe acá, AGREGALO aquí primero.
 *   3. Los tokens son el contrato. Cambiar uno acá impacta TODO el sitio
 *      consistentemente (eso es bueno).
 *   4. Backward compatibility: mantenemos aliases viejos (--trans-*, etc.)
 *      para no romper código existente.
 *
 * ESTRUCTURA:
 *   ▸ Colores      (paleta + semántica)
 *   ▸ Tipografía   (fuentes + tamaños + line-heights + pesos)
 *   ▸ Espaciado    (escala consistente)
 *   ▸ Radios       (border-radius)
 *   ▸ Sombras      (box-shadow)
 *   ▸ Z-index      (capas)
 *   ▸ Transiciones (durations + easings)
 *   ▸ Gradientes   (variantes verdes/oscuras)
 *
 * Refactor: 2026-06-03
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
     🎨 COLORES — paleta primaria
     ═══════════════════════════════════════════════════════════════════════ */

  /* Brand primario */
  --c-primary:        #39ff14;   /* Verde neón — hero, CTAs principales */
  --c-primary-dark:   #2ecc00;   /* Verde suave — interfaces, botones, precios */
  --c-primary-glow:   rgba(57, 255, 20, 0.5);  /* halo/glow */

  /* Background scale (de más oscuro a menos oscuro) */
  --c-bg-darkest:     #000;
  --c-bg-darker:      #050505;
  --c-bg-dark:        #0a0a0a;
  --c-bg-base:        #111;
  --c-bg-elevated:    #1a1a1a;   /* cards, badges, botones secundarios */
  --c-bg-overlay:     #222;       /* hover de elevated */

  /* Texto */
  --c-text-primary:   #ffffff;   /* títulos, texto principal */
  --c-text-secondary: #e0e0e0;   /* texto regular */
  --c-text-muted:     #999;      /* descripciones, hints */
  --c-text-subtle:    #666;      /* timestamps, metadata */
  --c-text-disabled:  #444;      /* inputs deshabilitados */

  /* Borders */
  --c-border-subtle:  rgba(255, 255, 255, 0.08);
  --c-border-base:    #2a2a2a;
  --c-border-strong:  #333;

  /* Acentos semánticos */
  --c-accent-blue:    #4ea8ff;   /* info, links secundarios */
  --c-accent-orange:  #ff9500;   /* ofertas, atención */
  --c-accent-red:     #ff4444;   /* errores, destructive */
  --c-accent-yellow:  #ffd700;   /* warnings */

  /* Estados */
  --c-success:        var(--c-primary);
  --c-warning:        var(--c-accent-yellow);
  --c-error:          var(--c-accent-red);
  --c-info:           var(--c-accent-blue);

  /* Overlays / Backdrops */
  --c-backdrop:           rgba(0, 0, 0, 0.85);
  --c-backdrop-light:     rgba(0, 0, 0, 0.5);
  --c-glass:              rgba(255, 255, 255, 0.04);
  --c-glass-hover:        rgba(255, 255, 255, 0.08);
  --c-primary-tint:       rgba(57, 255, 20, 0.04);
  --c-primary-tint-hover: rgba(57, 255, 20, 0.12);

  /* ═══════════════════════════════════════════════════════════════════════
     🔤 TIPOGRAFÍA
     ═══════════════════════════════════════════════════════════════════════ */

  --font-display:     'Cormorant Garamond', Georgia, serif;     /* títulos, hero */
  --font-body:        'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:        'SF Mono', 'Menlo', 'Monaco', monospace;
  --font-decorative:  'Playfair Display', serif;                /* opcional */

  /* Escala de tamaños (modular scale 1.25) */
  --fs-2xs:     0.625rem;   /* 10px — micro labels */
  --fs-xs:      0.75rem;    /* 12px — captions, footnotes */
  --fs-sm:      0.875rem;   /* 14px — body small */
  --fs-base:    1rem;       /* 16px — body */
  --fs-lg:      1.125rem;   /* 18px — subtitle */
  --fs-xl:      1.5rem;     /* 24px — h3 */
  --fs-2xl:     2rem;       /* 32px — h2 */
  --fs-3xl:     2.5rem;     /* 40px — h1 */
  --fs-4xl:     3.5rem;     /* 56px — hero */

  /* Line heights */
  --lh-tight:    1.2;       /* títulos */
  --lh-snug:     1.35;
  --lh-normal:   1.5;       /* body default */
  --lh-relaxed:  1.75;      /* texto largo */

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;
  --fw-black:    900;

  /* Letter-spacing */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;     /* uppercase labels */
  --ls-widest:   0.2em;     /* HERO HEADERS */

  /* ═══════════════════════════════════════════════════════════════════════
     📐 ESPACIADO (escala 4px base)
     ═══════════════════════════════════════════════════════════════════════ */

  --sp-0:        0;
  --sp-1:        0.25rem;   /*  4px */
  --sp-2:        0.5rem;    /*  8px */
  --sp-3:        0.75rem;   /* 12px */
  --sp-4:        1rem;      /* 16px */
  --sp-5:        1.25rem;   /* 20px */
  --sp-6:        1.5rem;    /* 24px */
  --sp-8:        2rem;      /* 32px */
  --sp-10:       2.5rem;    /* 40px */
  --sp-12:       3rem;      /* 48px */
  --sp-16:       4rem;      /* 64px */
  --sp-20:       5rem;      /* 80px */
  --sp-24:       6rem;      /* 96px */

  /* ═══════════════════════════════════════════════════════════════════════
     🔲 BORDER RADIUS
     ═══════════════════════════════════════════════════════════════════════ */

  --r-none:     0;
  --r-sm:       4px;        /* badges chicos */
  --r-base:     6px;
  --r-md:       8px;        /* botones, inputs default */
  --r-lg:       10px;
  --r-xl:       12px;       /* cards */
  --r-2xl:      16px;       /* modales */
  --r-3xl:      24px;       /* hero, contenedores grandes */
  --r-full:     9999px;     /* píldoras, círculos */

  /* ═══════════════════════════════════════════════════════════════════════
     🌗 SOMBRAS
     ═══════════════════════════════════════════════════════════════════════ */

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-base:  0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:    0 20px 60px rgba(0, 0, 0, 0.8);

  /* Glows verdes (CTAs y badges destacados) */
  --glow-primary-sm: 0 0 8px rgba(57, 255, 20, 0.25);
  --glow-primary:    0 0 16px rgba(57, 255, 20, 0.4);
  --glow-primary-lg: 0 0 24px rgba(57, 255, 20, 0.55);

  /* Inset (inputs, presses) */
  --shadow-inset:    inset 0 1px 2px rgba(0, 0, 0, 0.6);

  /* ═══════════════════════════════════════════════════════════════════════
     📚 Z-INDEX (capas — usar SIEMPRE estas variables, no números mágicos)
     ═══════════════════════════════════════════════════════════════════════ */

  --z-base:       0;
  --z-dropdown:   100;
  --z-sticky:     200;     /* headers fijos */
  --z-overlay:    300;     /* bottom sheets, drawers */
  --z-modal:      400;     /* modales normales */
  --z-popover:    500;     /* tooltips */
  --z-toast:      600;     /* notificaciones */
  --z-loader:     700;     /* full-page loaders */
  --z-critical:   9999;    /* dialogs críticos (keyboard help, etc.) */

  /* ═══════════════════════════════════════════════════════════════════════
     ⏱️ TRANSICIONES — durations + easings (también en transitions.css)
     ═══════════════════════════════════════════════════════════════════════ */

  /* Durations canonical */
  --t-instant:  80ms;
  --t-fast:     150ms;
  --t-normal:   250ms;
  --t-slow:     400ms;
  --t-page:     300ms;

  /* Easings canonical */
  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1.00);
  --ease-in:         cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out:     cubic-bezier(0.65, 0.05, 0.36, 1.00);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --ease-overshoot:  cubic-bezier(0.20, 0.90, 0.30, 1.40);

  /* ═══════════════════════════════════════════════════════════════════════
     🌈 GRADIENTES (combinaciones reusables)
     ═══════════════════════════════════════════════════════════════════════ */

  --grad-primary:        linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  --grad-primary-soft:   linear-gradient(135deg, rgba(57, 255, 20, 0.12) 0%, transparent 100%);
  --grad-dark-down:      linear-gradient(180deg, var(--c-bg-darker) 0%, var(--c-bg-darkest) 100%);
  --grad-elevated:       linear-gradient(180deg, var(--c-bg-elevated) 0%, var(--c-bg-base) 100%);
  --grad-glass:          linear-gradient(135deg, var(--c-glass) 0%, transparent 100%);

  /* ═══════════════════════════════════════════════════════════════════════
     ↩️ BACKWARD COMPATIBILITY (NO ELIMINAR)
     Aliases para código viejo que usa los nombres anteriores.
     Eventualmente migrar todo a los tokens canonical de arriba.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Antiguas variables de color en base.css */
  --primary:           var(--c-primary);
  --primary-dark:      var(--c-primary-dark);
  --primary-interfaces:var(--c-primary-dark);
  --neon-green:        var(--c-primary);
  --neon-green-dark:   var(--c-primary-dark);
  --bg-black:          var(--c-bg-darkest);
  --bg-dark:           var(--c-bg-dark);
  --bg-darker:         var(--c-bg-elevated);
  --black:             var(--c-bg-darkest);
  --dark-gray:         var(--c-bg-elevated);
  --text-white:        var(--c-text-primary);
  --text-light:        var(--c-text-secondary);
  --text-muted:        var(--c-text-muted);
  --border-subtle:     var(--c-border-subtle);
  --accent-blue:       var(--c-accent-blue);
  --accent-orange:     var(--c-accent-orange);
  --accent-red:        var(--c-accent-red);

  /* Antiguos tamaños tipográficos */
  --text-xs:           var(--fs-xs);
  --text-sm:           var(--fs-sm);
  --text-base:         var(--fs-base);
  --text-lg:           var(--fs-lg);
  --text-xl:           var(--fs-xl);
  --text-2xl:          var(--fs-2xl);

  /* Antiguas durations (duplicaban a --t-*) */
  --trans-fast:        var(--t-fast) var(--ease-out);
  --trans-normal:      var(--t-normal) var(--ease-out);
  --trans-slow:        var(--t-slow) var(--ease-out);

  /* Antiguos spacing (vivían en HTML inline) */
  --space-1:           var(--sp-1);
  --space-2:           var(--sp-2);
  --space-3:           var(--sp-3);
  --space-4:           var(--sp-4);
  --space-5:           var(--sp-5);
  --space-6:           var(--sp-6);
  --space-8:           var(--sp-8);

  /* Antiguas font-families */
  --font-display:      'Cormorant Garamond', Georgia, serif;
  --font-body:         'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:         'SF Mono', 'Menlo', 'Monaco', monospace;
}

/* ═════════════════════════════════════════════════════════════════════════
   PREFERS-COLOR-SCHEME — Alpha es siempre dark mode (por ahora).
   Si en el futuro se agrega light mode, los tokens cambiarían acá.
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  /* Por ahora no override. Cuando se implemente light mode, sobreescribir
     --c-bg-*, --c-text-*, etc. en este bloque. */
}