/* ============================================
   ROOT: Variables CSS Globales (Custom Properties)
   Versión: 1.0.0
   Desarrollado por: Developer - Agencia OH WOW!
   Email: development@agencia.ohwow.es
   Web: agencia.ohwow.es
   ============================================ */

:root {

  /* =====================
     TIPOGRAFÍA
  ===================== */
  --font-primary:    'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;
  --font-size-base:  16px;

  /* Tamaños fluidos con clamp() - Mobile First */
  --font-size-xs:    clamp(0.7rem,  0.3vw + 0.6rem,  0.75rem);
  --font-size-sm:    clamp(0.8rem,  0.4vw + 0.7rem,  0.875rem);
  --font-size-md:    clamp(0.875rem,0.5vw + 0.75rem, 1rem);
  --font-size-lg:    clamp(1rem,    0.6vw + 0.875rem, 1.125rem);
  --font-size-xl:    clamp(1.125rem,1vw + 0.9rem,    1.25rem);
  --font-size-2xl:   clamp(1.25rem, 2vw + 0.9rem,    1.5rem);
  --font-size-3xl:   clamp(1.5rem,  3vw + 0.8rem,    2rem);
  --font-size-4xl:   clamp(1.75rem, 4vw + 0.6rem,    2.5rem);
  --font-size-5xl:   clamp(2rem,    5vw + 0.5rem,    3.5rem);
  --font-size-7xl:   clamp(2.5rem,  6vw + 0.5rem,    4.5rem);

  /* Pesos */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* =====================
     COLORES - Formato HEX
  ===================== */

  /* Fondo y superficie */
  --color-bg:               #06060b;
  --color-bg-card:          rgba(255, 255, 255, 0.03);
  --color-bg-popover:       #0c0c14;
  --color-bg-sidebar:       #0c0c14;
  --color-surface:          rgba(255, 255, 255, 0.03);
  --color-surface-elevated: rgba(255, 255, 255, 0.06);

  /* Texto */
  --color-foreground:       #eef0f6;
  --color-muted-fg:         #6b7194;

  /* Primario - Violeta */
  --color-primary:          #8b5cf6;
  --color-primary-dark:     #6d28d9;
  --color-primary-light:    #a78bfa;
  --color-primary-fg:       #ffffff;
  --color-secondary-fg:     #c4b5fd;

  /* Acento - Cyan */
  --color-cyan:             #06b6d4;
  --color-cyan-dark:        #0891b2;

  /* Colores de estado / semántica */
  --color-emerald:          #10b981;
  --color-amber:            #f59e0b;
  --color-pink:             #ec4899;
  --color-pink-dark:        #db2777;
  --color-red:              #f43f5e;

  /* Bordes e inputs */
  --color-border:           rgba(255, 255, 255, 0.08);
  --color-input-bg:         rgba(255, 255, 255, 0.04);
  --color-muted:            rgba(255, 255, 255, 0.05);

  /* =====================
     COLORES - Formato RGB
     (para uso con rgba() y opacidades)
  ===================== */
  --color-primary-rgb:   139, 92, 246;
  --color-cyan-rgb:      6, 182, 212;
  --color-pink-rgb:      236, 72, 153;
  --color-emerald-rgb:   16, 185, 129;
  --color-amber-rgb:     245, 158, 11;
  --color-red-rgb:       244, 63, 94;
  --color-white-rgb:     255, 255, 255;

  /* =====================
     OPACIDADES
  ===================== */
  --opacity-full:    1;
  --opacity-90:      0.9;
  --opacity-80:      0.8;
  --opacity-70:      0.7;
  --opacity-50:      0.5;
  --opacity-30:      0.3;
  --opacity-15:      0.15;
  --opacity-10:      0.1;
  --opacity-05:      0.05;
  --opacity-03:      0.03;

  /* =====================
     ESPACIADOS FLUIDOS
  ===================== */
  --spacing-1:  0.25rem;
  --spacing-2:  0.5rem;
  --spacing-3:  0.75rem;
  --spacing-4:  1rem;
  --spacing-5:  1.25rem;
  --spacing-6:  1.5rem;
  --spacing-8:  2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;

  /* Espaciados de sección (fluidos) */
  --spacing-section:        clamp(3rem, 8vw, 8rem);
  --spacing-section-mobile: clamp(2rem, 5vw, 3rem);
  --spacing-section-tablet: clamp(3rem, 6vw, 5rem);
  --spacing-section-desktop:clamp(4rem, 8vw, 8rem);
  --spacing-container:      clamp(1rem, 4vw, 2rem);

  /* =====================
     RADIOS DE BORDE
  ===================== */
  --radius:    0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-full: 9999px;

  /* =====================
     GLOWS / SOMBRAS
  ===================== */
  --glow-violet: rgba(139, 92, 246, 0.4);
  --glow-cyan:   rgba(6, 182, 212, 0.4);
  --glow-pink:   rgba(236, 72, 153, 0.3);

  /* =====================
     TRANSICIONES
  ===================== */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* =====================
     Z-INDEX
  ===================== */
  --z-base:    1;
  --z-dropdown:10;
  --z-sticky:  20;
  --z-fixed:   30;
  --z-modal:   40;
  --z-overlay: 50;
}