/* ============================================================================
   FC Suplementos — Design Tokens (Premium / High-End)
   ============================================================================ */
:root {
  /* ── Brand colors ── */
  /* Azul Marino profundo, muy elegante */
  --c-primary:        #0f172a;    
  --c-primary-light:  #1e293b;
  --c-primary-dark:   #020617;
  --c-primary-glow:   rgba(15, 23, 42, 0.25);

  /* Neon vibrante para CTRs altos (EFECTO PERMANENTE NO REMOVER) */
  --c-accent:         #d9f99d;    
  --c-accent-light:   #ecfccb;
  --c-accent-dark:    #bef264;
  --c-accent-glow:    rgba(217, 249, 157, 0.40);

  /* ── Neutrals (Minimalist Light Mode) ── */
  --c-bg:             #f8fafc;
  --c-bg-elevated:    #ffffff;
  --c-bg-tertiary:    #f1f5f9;
  --c-bg-mute:        #1a1a1a;
  --c-surface:        #ffffff;
  --c-surface-hover:  #f1f5f9;
  --c-surface-light:  #e2e8f0;
  --c-border:         #e2e8f0;
  --c-border-light:   #f1f5f9;

  /* ── Text ── */
  --c-text:           #0f172a;
  --c-text-primary:   #0f172a;
  --c-text-secondary: #334155; /* Slate 700 - Mejorado para accesibilidad */
  --c-text-muted:     #94a3b8;
  --c-text-inverse:   #ffffff;

  /* ── Semantic ── */
  --c-success:        #10b981;
  --c-success-bg:     rgba(16, 185, 129, 0.12);
  --c-warning:        #f59e0b;
  --c-warning-bg:     rgba(245, 158, 11, 0.12);
  --c-danger:         #ef4444;
  --c-danger-bg:      rgba(239, 68, 68, 0.12);
  --c-info:           #3b82f6;
  --c-info-bg:        rgba(59, 130, 246, 0.12);
  --c-promo:          #bef264; /* High contrast lime for offers/CTAs */
  --c-promo-text:     #020617; /* Dark text for contrast against lime */

  /* ── WhatsApp ── */
  --c-whatsapp:       #25D366;
  --c-whatsapp-dark:  #128C7E;

  /* ── Gradients ── */
  --grad-primary:     linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  --grad-accent:      linear-gradient(135deg, var(--c-accent-dark) 0%, var(--c-accent) 100%);
  --grad-hero:        linear-gradient(160deg, #020617 0%, #0f172a 100%);
  --grad-card:        linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(248,250,252,0.8) 100%);
  --grad-glass:       linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);

  /* ── Typography ── */
  --ff-display:       'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-sans:          'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-heading:       'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-mono:          'Space Mono', monospace;

  --fs-xs:            0.75rem;    /* 12px */
  --fs-sm:            0.875rem;   /* 14px */
  --fs-base:          1rem;       /* 16px */
  --fs-md:            1.125rem;   /* 18px */
  --fs-lg:            1.25rem;    /* 20px */
  --fs-xl:            1.5rem;     /* 24px */
  --fs-2xl:           2rem;       /* 32px */
  --fs-3xl:           2.5rem;     /* 40px */
  --fs-4xl:           3.5rem;     /* 56px */
  --fs-5xl:           4.5rem;     /* 72px */

  --fw-normal:        400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-black:         800;

  --lh-tight:         1.1;
  --lh-snug:          1.3;
  --lh-normal:        1.6; 
  --lh-relaxed:       1.8;

  /* ── Spacing ── */
  --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 */

  /* ── Layout ── */
  --max-w:            1280px;
  --max-w-narrow:     960px;
  --header-h:         80px;
  --sidebar-w:        320px;

  /* ── Radius ── */
  --r-sm:             6px;
  --r-md:             12px;
  --r-lg:             16px;
  --r-xl:             24px;
  --r-full:           9999px;

  /* ── Shadows ── */
  --sh-sm:            0 1px 3px rgba(15, 23, 42, 0.08);
  --sh-md:            0 4px 12px rgba(15, 23, 42, 0.06);
  --sh-lg:            0 12px 32px rgba(15, 23, 42, 0.08);
  --sh-glow:          0 0 20px var(--c-primary-glow);
  --sh-glow-accent:   0 0 30px var(--c-accent-glow);

  /* ── Transitions ── */
  --tr-fast:          150ms ease;
  --tr-base:          300ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow:          500ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-spring:        600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ── */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-overlay:        300;
  --z-modal:          400;
  --z-cart:           500;
  --z-toast:          600;
  --z-whatsapp:       700;
}