/* ============================================================================
   THE WIN CAPITAL S.A. - Design System v2.0
   variables.css - Custom Properties / Design Tokens
   Autor: EDESSIS SRL
   ============================================================================ */

:root {

    /* =======================================================================
       PALETA DE COLORES
       ======================================================================= */

    /* Dorado Principal - CTA, acentos, WIN, premios */
    --twc-gold-50:  #fefbec;
    --twc-gold-100: #fcf3c9;
    --twc-gold-200: #f9e68e;
    --twc-gold-300: #f5d353;
    --twc-gold-400: #f0c02b;
    --twc-gold-500: #d4a017;
    --twc-gold-600: #b67c0e;
    --twc-gold-700: #935a0f;
    --twc-gold-800: #7a4714;
    --twc-gold-900: #683b17;
    --twc-gold-950: #3d1e08;

    --twc-primary:         var(--twc-gold-500);
    --twc-primary-hover:   var(--twc-gold-600);
    --twc-primary-light:   var(--twc-gold-300);
    --twc-primary-subtle:  var(--twc-gold-50);
    --twc-primary-dark:    var(--twc-gold-700);
    --twc-primary-rgb:     212, 160, 23;

    /* Negro/Gris - Fondos, headers, texto */
    --twc-gray-0:   #ffffff;
    --twc-gray-25:  #fcfcfd;
    --twc-gray-50:  #f9fafb;
    --twc-gray-100: #f3f4f6;
    --twc-gray-200: #e5e7eb;
    --twc-gray-300: #d1d5db;
    --twc-gray-400: #9ca3af;
    --twc-gray-500: #6b7280;
    --twc-gray-600: #4b5563;
    --twc-gray-700: #374151;
    --twc-gray-800: #1f2937;
    --twc-gray-900: #111827;
    --twc-gray-950: #030712;

    --twc-dark:        var(--twc-gray-900);
    --twc-dark-soft:   var(--twc-gray-800);
    --twc-dark-rgb:    17, 24, 39;

    /* Verde - Exoneracion, ganadores, confirmaciones */
    --twc-green-50:  #ecfdf5;
    --twc-green-100: #d1fae5;
    --twc-green-200: #a7f3d0;
    --twc-green-300: #6ee7b7;
    --twc-green-400: #34d399;
    --twc-green-500: #10b981;
    --twc-green-600: #059669;
    --twc-green-700: #047857;
    --twc-green-800: #065f46;
    --twc-green-900: #064e3b;

    --twc-success:       var(--twc-green-500);
    --twc-success-hover: var(--twc-green-600);
    --twc-success-light: var(--twc-green-100);
    --twc-success-rgb:   16, 185, 129;

    /* Rojo - Mora, advertencias */
    --twc-red-50:  #fef2f2;
    --twc-red-100: #fee2e2;
    --twc-red-200: #fecaca;
    --twc-red-300: #fca5a5;
    --twc-red-400: #f87171;
    --twc-red-500: #ef4444;
    --twc-red-600: #dc2626;
    --twc-red-700: #b91c1c;

    --twc-danger:       var(--twc-red-500);
    --twc-danger-hover: var(--twc-red-600);
    --twc-danger-light: var(--twc-red-100);
    --twc-danger-rgb:   239, 68, 68;

    /* Azul - Cliente recurrente, info, enlaces */
    --twc-blue-50:  #eff6ff;
    --twc-blue-100: #dbeafe;
    --twc-blue-200: #bfdbfe;
    --twc-blue-300: #93c5fd;
    --twc-blue-400: #60a5fa;
    --twc-blue-500: #3b82f6;
    --twc-blue-600: #2563eb;
    --twc-blue-700: #1d4ed8;

    --twc-info:       var(--twc-blue-500);
    --twc-info-hover: var(--twc-blue-600);
    --twc-info-light: var(--twc-blue-100);
    --twc-info-rgb:   59, 130, 246;

    /* Purpura - VIP WIN MEMBER, exclusividad */
    --twc-purple-50:  #faf5ff;
    --twc-purple-100: #f3e8ff;
    --twc-purple-200: #e9d5ff;
    --twc-purple-300: #d8b4fe;
    --twc-purple-400: #c084fc;
    --twc-purple-500: #a855f7;
    --twc-purple-600: #9333ea;
    --twc-purple-700: #7e22ce;

    --twc-vip:       var(--twc-purple-600);
    --twc-vip-hover: var(--twc-purple-700);
    --twc-vip-light: var(--twc-purple-100);
    --twc-vip-rgb:   147, 51, 234;

    /* Ambar - Warnings, alertas suaves */
    --twc-amber-50:  #fffbeb;
    --twc-amber-100: #fef3c7;
    --twc-amber-400: #fbbf24;
    --twc-amber-500: #f59e0b;
    --twc-amber-600: #d97706;

    --twc-warning:       var(--twc-amber-500);
    --twc-warning-light: var(--twc-amber-100);


    /* =======================================================================
       TIPOGRAFIA
       ======================================================================= */

    --twc-font-primary:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --twc-font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Escala tipografica (Major Third - 1.25) */
    --twc-text-xs:    0.75rem;     /* 12px */
    --twc-text-sm:    0.875rem;    /* 14px */
    --twc-text-base:  1rem;        /* 16px */
    --twc-text-md:    1.125rem;    /* 18px */
    --twc-text-lg:    1.25rem;     /* 20px */
    --twc-text-xl:    1.5rem;      /* 24px */
    --twc-text-2xl:   1.875rem;    /* 30px */
    --twc-text-3xl:   2.25rem;     /* 36px */
    --twc-text-4xl:   3rem;        /* 48px */
    --twc-text-5xl:   3.75rem;     /* 60px */
    --twc-text-6xl:   4.5rem;      /* 72px */

    /* Pesos */
    --twc-font-light:     300;
    --twc-font-regular:   400;
    --twc-font-medium:    500;
    --twc-font-semibold:  600;
    --twc-font-bold:      700;
    --twc-font-extrabold: 800;
    --twc-font-black:     900;

    /* Line heights */
    --twc-leading-none:    1;
    --twc-leading-tight:   1.15;
    --twc-leading-snug:    1.3;
    --twc-leading-normal:  1.5;
    --twc-leading-relaxed: 1.65;
    --twc-leading-loose:   1.8;

    /* Letter spacing */
    --twc-tracking-tighter: -0.05em;
    --twc-tracking-tight:   -0.025em;
    --twc-tracking-normal:  0;
    --twc-tracking-wide:    0.025em;
    --twc-tracking-wider:   0.05em;
    --twc-tracking-widest:  0.1em;


    /* =======================================================================
       ESPACIADO
       ======================================================================= */

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

    /* Secciones */
    --twc-section-py:       var(--twc-space-20);
    --twc-section-py-sm:    var(--twc-space-12);
    --twc-section-gap:      var(--twc-space-16);


    /* =======================================================================
       BORDES Y RADIOS
       ======================================================================= */

    --twc-radius-none: 0;
    --twc-radius-sm:   0.25rem;   /* 4px */
    --twc-radius-md:   0.5rem;    /* 8px */
    --twc-radius-lg:   0.75rem;   /* 12px */
    --twc-radius-xl:   1rem;      /* 16px */
    --twc-radius-2xl:  1.5rem;    /* 24px */
    --twc-radius-3xl:  2rem;      /* 32px */
    --twc-radius-full: 9999px;

    --twc-border-width:  1px;
    --twc-border-color:  var(--twc-gray-200);


    /* =======================================================================
       SOMBRAS
       ======================================================================= */

    --twc-shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --twc-shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --twc-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --twc-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --twc-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --twc-shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --twc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Sombras de colores para CTAs */
    --twc-shadow-gold:   0 8px 24px -4px rgba(var(--twc-primary-rgb), 0.35);
    --twc-shadow-green:  0 8px 24px -4px rgba(var(--twc-success-rgb), 0.35);
    --twc-shadow-dark:   0 8px 24px -4px rgba(var(--twc-dark-rgb), 0.4);
    --twc-shadow-purple: 0 8px 24px -4px rgba(var(--twc-vip-rgb), 0.35);
    --twc-shadow-blue:   0 8px 24px -4px rgba(var(--twc-info-rgb), 0.35);


    /* =======================================================================
       TRANSICIONES Y ANIMACIONES
       ======================================================================= */

    --twc-ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --twc-ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --twc-ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --twc-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --twc-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --twc-ease-spring:   cubic-bezier(0.22, 1.0, 0.36, 1.0);

    --twc-duration-75:   75ms;
    --twc-duration-100:  100ms;
    --twc-duration-150:  150ms;
    --twc-duration-200:  200ms;
    --twc-duration-300:  300ms;
    --twc-duration-400:  400ms;
    --twc-duration-500:  500ms;
    --twc-duration-700:  700ms;

    --twc-transition-fast:    var(--twc-duration-150) var(--twc-ease-default);
    --twc-transition-base:    var(--twc-duration-300) var(--twc-ease-default);
    --twc-transition-slow:    var(--twc-duration-500) var(--twc-ease-default);
    --twc-transition-bounce:  var(--twc-duration-400) var(--twc-ease-bounce);
    --twc-transition-spring:  var(--twc-duration-500) var(--twc-ease-spring);


    /* =======================================================================
       Z-INDEX SCALE
       ======================================================================= */

    --twc-z-behind:     -1;
    --twc-z-base:       1;
    --twc-z-dropdown:   100;
    --twc-z-sticky:     200;
    --twc-z-banner:     300;
    --twc-z-navbar:     400;
    --twc-z-overlay:    500;
    --twc-z-modal:      600;
    --twc-z-popover:    700;
    --twc-z-toast:      800;
    --twc-z-whatsapp:   850;
    --twc-z-preloader:  900;
    --twc-z-max:        9999;


    /* =======================================================================
       LAYOUT
       ======================================================================= */

    --twc-container-max:  1320px;
    --twc-container-sm:   720px;
    --twc-container-md:   960px;
    --twc-container-lg:   1140px;

    --twc-top-banner-h:   40px;
    --twc-navbar-h:       76px;
    --twc-navbar-h-sm:    64px;
    --twc-header-total:   calc(var(--twc-top-banner-h) + var(--twc-navbar-h));


    /* =======================================================================
       GRADIENTES REUTILIZABLES
       ======================================================================= */

    --twc-grad-gold:    linear-gradient(135deg, var(--twc-gold-400) 0%, var(--twc-gold-600) 100%);
    --twc-grad-gold-h:  linear-gradient(180deg, var(--twc-gold-300) 0%, var(--twc-gold-600) 100%);
    --twc-grad-dark:    linear-gradient(135deg, var(--twc-gray-800) 0%, var(--twc-gray-950) 100%);
    --twc-grad-dark-v:  linear-gradient(180deg, var(--twc-gray-900) 0%, #000000 100%);
    --twc-grad-hero:    linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 40%, #16213e 100%);
    --twc-grad-green:   linear-gradient(135deg, var(--twc-green-400) 0%, var(--twc-green-700) 100%);
    --twc-grad-purple:  linear-gradient(135deg, var(--twc-purple-400) 0%, var(--twc-purple-700) 100%);
    --twc-grad-blue:    linear-gradient(135deg, var(--twc-blue-400) 0%, var(--twc-blue-700) 100%);
    --twc-grad-radial:  radial-gradient(ellipse at 30% 0%, rgba(var(--twc-primary-rgb), 0.15) 0%, transparent 70%);
    --twc-grad-glass:   linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);

    /* Overlay para imagenes */
    --twc-overlay-dark:  linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.85) 100%);
    --twc-overlay-gold:  linear-gradient(135deg, rgba(var(--twc-primary-rgb),0.85) 0%, rgba(var(--twc-dark-rgb),0.9) 100%);


    /* =======================================================================
       GLASSMORPHISM
       ======================================================================= */

    --twc-glass-bg:      rgba(255, 255, 255, 0.08);
    --twc-glass-border:  rgba(255, 255, 255, 0.12);
    --twc-glass-blur:    16px;
    --twc-glass-bg-dark: rgba(0, 0, 0, 0.25);

    --twc-glass-white-bg:     rgba(255, 255, 255, 0.7);
    --twc-glass-white-border: rgba(255, 255, 255, 0.5);
    --twc-glass-white-blur:   12px;


    /* =======================================================================
       BREAKPOINTS (solo referencia, media queries en responsive.css)
       ======================================================================= */

    /* --twc-bp-xs:  0       */
    /* --twc-bp-sm:  576px   */
    /* --twc-bp-md:  768px   */
    /* --twc-bp-lg:  992px   */
    /* --twc-bp-xl:  1200px  */
    /* --twc-bp-xxl: 1400px  */
}


/* =======================================================================
   DARK SECTION OVERRIDES
   Usado en secciones con fondo oscuro (hero, CTA, comparativa, footer)
   ======================================================================= */

.twc-dark-section {
    --twc-text-primary:    var(--twc-gray-0);
    --twc-text-secondary:  var(--twc-gray-300);
    --twc-text-muted:      var(--twc-gray-400);
    --twc-border-color:    rgba(255, 255, 255, 0.1);
    --twc-card-bg:         rgba(255, 255, 255, 0.06);
    --twc-card-bg-hover:   rgba(255, 255, 255, 0.1);
    --twc-card-border:     rgba(255, 255, 255, 0.08);
}

/* =======================================================================
   LIGHT SECTION DEFAULTS
   ======================================================================= */

.twc-light-section,
:root {
    --twc-text-primary:    var(--twc-gray-900);
    --twc-text-secondary:  var(--twc-gray-600);
    --twc-text-muted:      var(--twc-gray-400);
    --twc-card-bg:         var(--twc-gray-0);
    --twc-card-bg-hover:   var(--twc-gray-50);
    --twc-card-border:     var(--twc-gray-200);
    --twc-body-bg:         var(--twc-gray-0);
}