/*
 * CloudStudio IoT - Design Tokens & Variables
 * Version: 1.2.0
 * Module 1: Variables y Custom Properties
 * Compatible con: Elementor, WordPress, HTML estático
 */

/* ====================================
   🎨 DESIGN TOKENS - Sistema de Variables CSS
==================================== */

:root {
  /* 🌈 COLORES PRINCIPALES - Brand Guidelines */
  --cs-primary: #6C46CE;           /* Violeta - Color principal */
  --cs-secondary: #DF5676;         /* Coral - Segundo en jerarquía */
  --cs-accent-uva: #963D7A;        /* Uva - Tercer color */
  --cs-accent-cielo: #3E98BC;      /* Cielo - Colores fríos */
  --cs-accent-aguamarina: #89D0D6; /* Aguamarina - Colores fríos */

  /* 🎨 GRADIENTES OFICIALES - Brand Guidelines */
  --cs-gradient-primary: linear-gradient(135deg, #6C46CE 0%, #DF5676 100%);
  --cs-gradient-clarity: linear-gradient(135deg, #6C46CE 0%, #3E98BC 100%);
  --cs-gradient-trust: linear-gradient(135deg, #3E98BC 0%, #89D0D6 100%);
  --cs-gradient-strength: linear-gradient(135deg, #6C46CE 0%, #963D7A 100%);
  --cs-gradient-innovation: linear-gradient(135deg, #6C46CE 0%, #89D0D6 100%);

  /* 🆕 GRADIENTES DE FONDO ADAPTATIVOS */
  --cs-bg-gradient-section:
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 20%, #fdfdfd 50%, #fdfdfd 80%, #ece6ff 105%),
    radial-gradient(circle at top right, rgba(108, 70, 206, 0.08) 15%, transparent 70%);

  --cs-bg-gradient-hero:
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 30%, #fdfdfd 70%, #ece6ff 105%),
    radial-gradient(circle at bottom left, rgba(108, 70, 206, 0.12) 18%, transparent 65%),
    radial-gradient(circle at top right, rgba(223, 86, 118, 0.08) 15%, transparent 75%);

  --cs-bg-gradient-subtle:
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 40%, #fdfdfd 60%, #ece6ff 105%),
    radial-gradient(circle at center, rgba(108, 70, 206, 0.05) 20%, transparent 70%);

  --cs-bg-gradient-features:
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 25%, #fdfdfd 75%, #ece6ff 105%),
    radial-gradient(circle at top left, rgba(62, 152, 188, 0.10) 18%, transparent 65%),
    radial-gradient(circle at bottom right, rgba(137, 208, 214, 0.08) 15%, transparent 75%);

  /* 🔤 COLORES NEUTROS */
  --cs-white: #FFFFFF;
  --cs-black: #000000;
  --cs-gray-dark: #3C3C3C;         /* Para textos e íconos */
  --cs-gray-medium: #9D9D9D;
  --cs-gray-light: #E3E3E3;        /* Color principal neutro */

  /* 🎯 DESIGN TOKENS SEMÁNTICOS MARKETING */
  --iot-color-trust: var(--cs-accent-cielo);           /* Confianza, estabilidad */
  --iot-color-success: #27ae60;                        /* Éxito, resultados positivos */
  --iot-color-innovation: var(--cs-primary);           /* Innovación, tecnología */
  --iot-color-urgency: #e74c3c;                        /* Urgencia, atención */
  --iot-color-premium: #2c3e50;                        /* Exclusividad, premium */
  --iot-color-growth: var(--cs-secondary);             /* Crecimiento, oportunidad */

  /* 📈 COLORES CONTEXTUALES PARA SECCIONES */
  --iot-hero-accent: var(--cs-gradient-primary);       /* Hero: innovación + pasión */
  --iot-features-accent: var(--cs-gradient-clarity);   /* Features: claridad */
  --iot-testimonials-accent: var(--cs-gradient-trust); /* Testimonials: confianza */
  --iot-pricing-accent: var(--cs-gradient-strength);   /* Pricing: poder, decisión */
  --iot-cta-accent: var(--cs-gradient-primary);        /* CTA: acción inmediata */

  /* 🔤 COLORES DE TEXTO SEMÁNTICOS */
  --iot-text-primary: #2d3436;                         /* Títulos principales */
  --iot-text-secondary: #636e72;                       /* Texto descriptivo */
  --iot-text-muted: #95a5a6;                          /* Texto secundario */
  --iot-text-inverse: #ffffff;                         /* Texto sobre fondos oscuros */
  --iot-text-accent: var(--cs-primary);               /* Texto destacado */

  /* 🏢 COLORES DE SUPERFICIE PARA MARKETING */
  --iot-surface-primary: #ffffff;                      /* Fondo principal */
  --iot-surface-secondary: #f8f9fa;                    /* Fondo alternativo */
  --iot-surface-elevated: #ffffff;                     /* Cards elevadas */
  --iot-surface-accent: rgba(108, 70, 206, 0.03);    /* Fondo con tint brand */
  --iot-border-light: #f1f3f4;                        /* Bordes suaves */
  --iot-border-medium: #e9ecef;                       /* Bordes normales */

  /* 🚀 SISTEMA DE SPACING FLUIDO MARKETING */
  --iot-space-xs: clamp(0.25rem, 0.5vw, 0.5rem);        /* 4px → 8px */
  --iot-space-sm: clamp(0.5rem, 1vw, 1rem);             /* 8px → 16px */
  --iot-space-md: clamp(1rem, 2vw, 1.5rem);             /* 16px → 24px */
  --iot-space-lg: clamp(1.5rem, 3vw, 2.5rem);           /* 24px → 40px */
  --iot-space-xl: clamp(2rem, 4vw, 3.5rem);             /* 32px → 56px */
  --iot-space-2xl: clamp(2.5rem, 5vw, 5rem);            /* 40px → 80px */
  --iot-space-3xl: clamp(3rem, 6vw, 8rem);              /* 48px → 128px */

  /* 🎯 SPACING SEMÁNTICO PARA MARKETING */
  --iot-section-padding: clamp(3rem, 8vw, 10rem);       /* Entre secciones principales */
  --iot-hero-padding: clamp(4rem, 10vw, 12rem);         /* Hero section spacing */
  --iot-card-gap: clamp(1.5rem, 4vw, 4rem);             /* Entre cards/features */
  --iot-cta-margin: clamp(2rem, 5vw, 6rem);             /* Alrededor de CTAs importantes */

  /* 🎯 SISTEMA DE SOMBRAS MARKETING */
  --iot-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);       /* Elementos sutiles */
  --iot-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);        /* Cards normales */
  --iot-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);       /* Elementos importantes */
  --iot-shadow-strong: 0 16px 40px rgba(0, 0, 0, 0.12);     /* Hero, CTAs principales */
  --iot-shadow-brand: 0 8px 32px rgba(108, 70, 206, 0.2);   /* Elementos con brand color */
  --iot-shadow-glow: 0 0 32px rgba(108, 70, 206, 0.15);     /* Efecto glow para CTAs */

  /* 📱 TIPOGRAFÍA FLUIDA MARKETING */
  --iot-text-hero: clamp(2.5rem, 8vw, 5rem);               /* Hero principal: 40px → 80px */
  --iot-text-headline: clamp(2rem, 6vw, 4rem);             /* Headlines: 32px → 64px */
  --iot-text-subheader: clamp(1.5rem, 4vw, 2.5rem);       /* Subheaders: 24px → 40px */
  --iot-text-title: clamp(1.25rem, 3vw, 2rem);             /* Títulos cards: 20px → 32px */
  --iot-text-body-large: clamp(1.125rem, 2vw, 1.5rem);     /* Texto importante: 18px → 24px */
  --iot-text-body: clamp(1rem, 1.5vw, 1.25rem);            /* Texto normal: 16px → 20px */
  --iot-text-caption: clamp(0.875rem, 1vw, 1rem);          /* Texto pequeño: 14px → 16px */

  /* 🎯 EFECTOS VISUALES PARA MARKETING */
  --iot-blur-light: blur(8px);                             /* Glassmorphism sutil */
  --iot-blur-medium: blur(16px);                           /* Glassmorphism normal */
  --iot-blur-strong: blur(24px);                           /* Glassmorphism intenso */
  --iot-backdrop-light: rgba(255, 255, 255, 0.8);         /* Fondo glass claro */
  --iot-backdrop-medium: rgba(255, 255, 255, 0.9);        /* Fondo glass medio */
  --iot-backdrop-dark: rgba(108, 70, 206, 0.1);           /* Fondo glass con brand */

  /* 📝 TIPOGRAFÍA - Font Families & Weights */
  --cs-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cs-font-weight-light: 300;
  --cs-font-weight-regular: 400;
  --cs-font-weight-medium: 500;
  --cs-font-weight-semibold: 600;
  --cs-font-weight-bold: 700;
  --cs-font-weight-extrabold: 800;
  --cs-font-weight-black: 900;

  /* 📏 ESCALAS TIPOGRÁFICAS FLUIDAS */
  --cs-text-h1: clamp(2.5rem, calc(5vw + 1rem), 4rem);       /* 40px → 64px */
  --cs-text-h2: clamp(2rem, calc(4vw + 1rem), 3.5rem);       /* 32px → 56px */
  --cs-text-h3: clamp(1.5rem, calc(3vw + 0.5rem), 2.25rem);  /* 24px → 36px */
  --cs-text-h4: clamp(1.125rem, calc(2vw + 0.5rem), 1.5rem); /* 18px → 24px */
  --cs-text-body: clamp(1rem, calc(1.5vw + 0.5rem), 1.25rem); /* 16px → 20px */
  --cs-text-small: clamp(0.875rem, calc(1vw + 0.5rem), 1rem); /* 14px → 16px */
  --cs-text-xs: 0.75rem;                                 /* 12px fijo */

  /* 📏 ESCALAS LEGACY COMPATIBLES - Para elementos HTML directos */
  --cs-legacy-h1: clamp(2.5rem, 4vw, 3.375rem);     /* 54px máximo como antes */
  --cs-legacy-h2: clamp(2rem, 3vw, 3rem);           /* 48px máximo como antes */
  --cs-legacy-h3: clamp(1.5rem, 2vw, 1.75rem);      /* 28px máximo como antes */
  --cs-legacy-h4: clamp(1.125rem, 1.5vw, 1.25rem);  /* 20px máximo como antes */

  /* 📐 ESPACIADO FLUIDO */
  --cs-space-xs: clamp(0.25rem, 0.5vw, 0.5rem);     /* 4px → 8px */
  --cs-space-sm: clamp(0.5rem, 1vw, 0.75rem);       /* 8px → 12px */
  --cs-space-md: clamp(1rem, 2vw, 1.5rem);          /* 16px → 24px */
  --cs-space-lg: clamp(1.5rem, 3vw, 2.5rem);        /* 24px → 40px */
  --cs-space-xl: clamp(2rem, 4vw, 3.5rem);          /* 32px → 56px */
  --cs-space-xxl: clamp(3rem, 6vw, 5rem);           /* 48px → 80px */
  --cs-space-xxxl: clamp(4rem, 8vw, 7rem);          /* 64px → 112px */

  /* 🌟 BORDES Y RADIUS */
  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-radius-xl: 24px;
  --cs-radius-full: 50%;

  /* 🌟 SOMBRAS CLOUD STUDIO */
  --cs-shadow-sm: 0 1px 3px rgba(108, 70, 206, 0.1);
  --cs-shadow-md: 0 4px 12px rgba(108, 70, 206, 0.15);
  --cs-shadow-lg: 0 8px 25px rgba(108, 70, 206, 0.2);
  --cs-shadow-primary: 0 8px 32px rgba(108, 70, 206, 0.25);
  --cs-shadow-glow: 0 0 32px rgba(108, 70, 206, 0.3);

  /* ⚡ TRANSICIONES MEJORADAS */
  --cs-transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cs-transition-normal: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cs-transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cs-transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* 📱 BREAKPOINTS (para referencia en media queries) */
  --cs-bp-xs: 375px;    /* iPhone SE */
  --cs-bp-sm: 480px;    /* Mobile large */
  --cs-bp-md: 768px;    /* Tablet */
  --cs-bp-lg: 1024px;   /* Desktop */
  --cs-bp-xl: 1280px;   /* Large desktop */
  --cs-bp-xxl: 1440px;  /* Extra large */

  /* 🆕 VARIABLES CONTEXTUALES */
  --primary-context: var(--cs-primary);
  --gradient-context: var(--cs-gradient-primary);
  --bg-context: var(--cs-white);
}

/* ====================================
   🌙 MODO OSCURO - Dark Theme Variables
==================================== */

[data-theme="dark"],
.dark-mode {
  /* 🌈 COLORES PRINCIPALES DARK */
  --cs-primary: #8B6FDE;           /* Violeta más claro */
  --cs-secondary: #FF7A99;         /* Coral más brillante */
  --cs-accent-cielo: #5EAED3;      /* Cielo más claro */
  --cs-accent-aguamarina: #A3DFE5; /* Aguamarina más claro */

  /* 🎨 GRISES INVERTIDOS */
  --cs-white: #1A1A1A;             /* Fondo oscuro principal */
  --cs-gray-lightest: #2A2A2A;     /* Fondos cards/sections */
  --cs-gray-lighter: #3A3A3A;      /* Borders/dividers */
  --cs-gray-light: #4A4A4A;        /* Disabled states */
  --cs-gray: #888888;              /* Texto secundario */
  --cs-gray-dark: #E0E0E0;         /* Texto principal */
  --cs-black: #FFFFFF;             /* Blanco puro para headings */

  /* 🎨 FONDOS DEGRADADOS DARK */
  --cs-bg-gradient-section: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
  --cs-bg-gradient-hero: linear-gradient(135deg, #2A2A2A 0%, #1A1A1A 100%);
  --cs-bg-gradient-features: linear-gradient(180deg, #1A1A1A 0%, #2A2A2A 100%);

  /* 🌈 SUPERFICIES IOT DARK */
  --iot-surface-primary: rgba(255, 255, 255, 0.05);
  --iot-surface-secondary: rgba(255, 255, 255, 0.08);
  --iot-surface-tertiary: rgba(255, 255, 255, 0.12);

  /* 📝 TEXTO DARK */
  --iot-text-primary: #FFFFFF;
  --iot-text-secondary: rgba(255, 255, 255, 0.7);
  --iot-text-tertiary: rgba(255, 255, 255, 0.5);

  /* 🛡️ SOMBRAS DARK (más sutiles) */
  --cs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --cs-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --cs-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
  --cs-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.7);
  --cs-shadow-primary: 0 8px 24px rgba(139, 111, 222, 0.3);
  --cs-shadow-secondary: 0 8px 24px rgba(255, 122, 153, 0.3);

  /* 🪟 GLASSMORPHISM DARK */
  --iot-backdrop-light: rgba(0, 0, 0, 0.3);
  --iot-backdrop-medium: rgba(0, 0, 0, 0.5);
  --iot-backdrop-dark: rgba(139, 111, 222, 0.15);
}

/* 🌓 AUTO-DETECT DARK MODE */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Aplicar mismo set de variables dark */
    --cs-primary: #8B6FDE;
    --cs-secondary: #FF7A99;
    --cs-white: #1A1A1A;
    --cs-gray-lightest: #2A2A2A;
    --cs-gray-lighter: #3A3A3A;
    --cs-gray-light: #4A4A4A;
    --cs-gray: #888888;
    --cs-gray-dark: #E0E0E0;
    --cs-black: #FFFFFF;
    --cs-bg-gradient-section: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
    --iot-surface-primary: rgba(255, 255, 255, 0.05);
    --iot-text-primary: #FFFFFF;
    --iot-text-secondary: rgba(255, 255, 255, 0.7);
    --cs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --cs-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  }
}