/* ============================================================
   RENOVA FEM STUDIO — Design Tokens
   Importar primero en todos los archivos CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* === FONDOS === */
  --color-bg-primario:    #000000;
  --color-bg-secundario:  #0f0f18;
  --color-bg-elevado:     #16162a;
  --color-bg-card:        #1a1a2e;

  /* === GLASSMORPHISM === */
  --glass-bg:             rgba(255, 255, 255, 0.04);
  --glass-bg-hover:       rgba(255, 255, 255, 0.08);
  --glass-bg-form:        rgba(255, 255, 255, 0.06);
  --glass-border:         rgba(255, 255, 255, 0.10);
  --glass-border-hover:   rgba(255, 255, 255, 0.20);
  --glass-border-acento:  rgba(192, 132, 252, 0.30);
  --glass-border-cyan:    rgba(34,  211, 238, 0.30);
  --glass-blur:           blur(20px);
  --glass-saturate:       saturate(180%);

  /* === ACENTO PRINCIPAL (violeta femenino) === */
  --color-acento:         #c084fc;
  --color-acento-oscuro:  #9333ea;
  --color-acento-claro:   #e879f9;
  --color-acento-glow:    rgba(192, 132, 252, 0.30);
  --color-acento-sutil:   rgba(192, 132, 252, 0.10);

  /* === SECUNDARIO (cyan — del logo) === */
  --color-secundario:     #22D3EE;
  --color-secundario-osc: #0891B2;
  --color-secundario-glow: rgba(34, 211, 238, 0.25);
  --color-secundario-sutil: rgba(34, 211, 238, 0.10);

  /* === GRADIENTES === */
  --grad-acento:     linear-gradient(135deg, var(--color-acento-oscuro), var(--color-acento-claro));
  --grad-secundario: linear-gradient(135deg, var(--color-secundario-osc), var(--color-secundario));
  --grad-hero:       linear-gradient(135deg, #1a0533 0%, #0a0a0f 50%, #110a1e 100%);
  --grad-card:       linear-gradient(135deg, rgba(192,132,252,0.05), rgba(34,211,238,0.05));
  --grad-overlay:    linear-gradient(to bottom, rgba(10,10,15,0.3) 0%, rgba(10,10,15,0.95) 100%);

  /* === TEXTO === */
  --color-texto:          #f1f0f5;
  --color-texto-sec:      #a89ec0;
  --color-texto-tenue:    #6b6485;
  --color-texto-disabled: #4a4460;

  /* === FEEDBACK === */
  --color-exito:          #34d399;
  --color-exito-bg:       rgba(52, 211, 153, 0.12);
  --color-error:          #f87171;
  --color-error-bg:       rgba(248, 113, 113, 0.12);
  --color-advertencia:    #fbbf24;
  --color-advertencia-bg: rgba(251, 191, 36, 0.12);
  --color-info:           #60a5fa;
  --color-info-bg:        rgba(96, 165, 250, 0.12);

  /* === TIPOGRAFÍA === */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala fluid (clamp: mínimo, preferido, máximo) */
  --text-xs:    clamp(0.70rem,  1.3vw, 0.80rem);
  --text-sm:    clamp(0.82rem,  1.6vw, 0.90rem);
  --text-base:  clamp(0.95rem,  1.9vw, 1.05rem);
  --text-lg:    clamp(1.10rem,  2.2vw, 1.25rem);
  --text-xl:    clamp(1.25rem,  2.8vw, 1.50rem);
  --text-2xl:   clamp(1.50rem,  3.5vw, 2.00rem);
  --text-3xl:   clamp(1.90rem,  4.5vw, 2.75rem);
  --text-4xl:   clamp(2.40rem,  5.5vw, 3.50rem);
  --text-hero:  clamp(2.80rem,  7.0vw, 5.00rem);

  --font-light:   300;
  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;

  /* === ESPACIADO === */
  --space-1:   0.25rem;
  --space-2:   0.50rem;
  --space-3:   0.75rem;
  --space-4:   1.00rem;
  --space-5:   1.25rem;
  --space-6:   1.50rem;
  --space-8:   2.00rem;
  --space-10:  2.50rem;
  --space-12:  3.00rem;
  --space-16:  4.00rem;
  --space-20:  5.00rem;
  --space-24:  6.00rem;
  --space-32:  8.00rem;

  /* === BORDES === */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-glass:     0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-elevado:   0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow:      0 0 30px var(--color-acento-glow);
  --shadow-glow-rosa: 0 0 30px var(--color-secundario-glow);
  --shadow-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* === TRANSICIONES === */
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1.0);
  --trans-rápida: 150ms var(--ease-in-out);
  --trans-normal: 300ms var(--ease-in-out);
  --trans-lenta:  500ms var(--ease-in-out);

  /* === Z-INDEX === */
  --z-base:    1;
  --z-elevado: 10;
  --z-sticky:  50;
  --z-modal:   100;
  --z-nav:     200;
  --z-toast:   300;

  /* === CONTENEDOR === */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 5vw, 3rem);
}