/**
 * Design Tokens & CSS Variables
 * Sistema de tokens de diseño inspirado en FlowFest
 */

:root {
  /* ========================================
     COLORES - Paleta vibrante y divertida
     ======================================== */
  
  /* Colores principales */
  --color-primary: #FF6B35;        /* Naranja vibrante */
  --color-primary-dark: #E85A28;
  --color-primary-light: #FF8C5A;
  
  --color-secondary: #FFB3D9;      /* Rosa suave */
  --color-secondary-dark: #FF8BC4;
  --color-secondary-light: #FFD4EC;
  
  /* Colores de acento */
  --color-accent-yellow: #FFC759;
  --color-accent-purple: #9D4EDD;
  --color-accent-blue: #4CC9F0;
  --color-accent-green: #06FFA5;
  --color-accent-pink: #FF006E;
  
  /* Colores neutros */
  --color-bg-primary: #FFF8F0;     /* Beige claro */
  --color-bg-secondary: #FFFBF5;
  --color-bg-dark: #1A1A1A;
  --color-white: #FFFFFF;
  --color-black: #0A0A0A;
  
  /* Grises */
  --color-gray-50: #F9F9F9;
  --color-gray-100: #E8E8E8;
  --color-gray-200: #D1D1D1;
  --color-gray-300: #B8B8B8;
  --color-gray-400: #8A8A8A;
  --color-gray-500: #6B6B6B;
  --color-gray-600: #4A4A4A;
  --color-gray-700: #2E2E2E;
  --color-gray-800: #1F1F1F;
  --color-gray-900: #121212;
  
  /* ========================================
     TIPOGRAFÍA
     ======================================== */
  
  /* Familias de fuentes */
  --font-display: 'Fredoka', 'Comic Sans MS', cursive;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Tamaños de fuente - Escala modular (1.250) */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  --font-size-7xl: 4.5rem;      /* 72px */
  --font-size-8xl: 6rem;        /* 96px */
  
  /* Pesos de fuente */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;
  
  /* ========================================
     ESPACIADO - Sistema de 4px
     ======================================== */
  
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
  --space-48: 12rem;     /* 192px */
  
  /* ========================================
     BORDER RADIUS - Esquinas redondeadas
     ======================================== */
  
  --radius-sm: 0.375rem;    /* 6px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.5rem;     /* 24px */
  --radius-3xl: 2rem;       /* 32px */
  --radius-4xl: 3rem;       /* 48px */
  --radius-full: 9999px;    /* Circular */
  
  /* ========================================
     SOMBRAS - Estilo FlowFest con contornos
     ======================================== */
  
  /* Sombras con contorno negro (sticker effect) */
  --shadow-outline-sm: 0 0 0 2px var(--color-black);
  --shadow-outline-md: 0 0 0 3px var(--color-black);
  --shadow-outline-lg: 0 0 0 4px var(--color-black);
  --shadow-outline-xl: 0 0 0 5px var(--color-black);
  
  /* Sombras elevadas */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.22);
  
  /* Sombras especiales estilo FlowFest */
  --shadow-sticker: 
    var(--shadow-outline-md),
    4px 4px 0 0 var(--color-black);
  
  --shadow-sticker-hover: 
    var(--shadow-outline-md),
    6px 6px 0 0 var(--color-black);
  
  --shadow-card: 
    var(--shadow-outline-md),
    8px 8px 0 0 rgba(0, 0, 0, 0.1);
  
  /* ========================================
     TRANSICIONES
     ======================================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;
  
  /* Easings personalizados */
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ========================================
     LAYOUT
     ======================================== */
  
  /* Container */
  --container-max-width: 1400px;
  --container-padding: var(--space-6);
  
  /* Z-index layers */
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;
  
  /* ========================================
     BREAKPOINTS (para JavaScript)
     ======================================== */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ========================================
   VARIABLES ESPECÍFICAS POR SECCIÓN
   ======================================== */

/* Navbar */
:root {
  --navbar-height: 80px;
  --navbar-bg: var(--color-white);
  --navbar-shadow: var(--shadow-sm);
}

/* Hero */
:root {
  --hero-min-height: 100vh;
  --hero-padding-y: var(--space-24);
}

/* Cards */
:root {
  --card-padding: var(--space-8);
  --card-radius: var(--radius-3xl);
  --card-shadow: var(--shadow-sticker);
}

/* Botones */
:root {
  --btn-padding-x: var(--space-8);
  --btn-padding-y: var(--space-4);
  --btn-radius: var(--radius-full);
  --btn-shadow: var(--shadow-sticker);
}

/* Tags */
:root {
  --tag-padding-x: var(--space-4);
  --tag-padding-y: var(--space-2);
  --tag-radius: var(--radius-full);
  --tag-shadow: var(--shadow-outline-sm);
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */

@media (max-width: 768px) {
  :root {
    /* Ajustar tamaños de fuente en mobile */
    --font-size-4xl: 1.875rem;   /* 30px */
    --font-size-5xl: 2.25rem;    /* 36px */
    --font-size-6xl: 2.75rem;    /* 44px */
    --font-size-7xl: 3.25rem;    /* 52px */
    --font-size-8xl: 4rem;       /* 64px */
    
    /* Ajustar espaciado en mobile */
    --space-16: 3rem;    /* 48px */
    --space-20: 4rem;    /* 64px */
    --space-24: 5rem;    /* 80px */
    
    /* Container más pequeño */
    --container-padding: var(--space-4);
    
    /* Navbar más pequeño */
    --navbar-height: 70px;
  }
}

/* ========================================
   UTILIDADES DE COLOR (para JavaScript)
   ======================================== */

/* Paleta de tags/badges */
:root {
  --tag-pink-bg: #FFD4EC;
  --tag-pink-text: #C2185B;
  
  --tag-orange-bg: #FFE4D6;
  --tag-orange-text: #E85A28;
  
  --tag-yellow-bg: #FFF4D6;
  --tag-yellow-text: #E89A00;
  
  --tag-purple-bg: #E8D6FF;
  --tag-purple-text: #7B2CBF;
  
  --tag-green-bg: #D6FFF0;
  --tag-green-text: #00A878;
  
  --tag-blue-bg: #D6F0FF;
  --tag-blue-text: #0077B6;
}

/* ========================================
   MODO OSCURO (Opcional)
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Descomentar para habilitar modo oscuro */
    /* --color-bg-primary: #1A1A1A; */
    /* --color-bg-secondary: #2E2E2E; */
    /* --color-white: #0A0A0A; */
    /* --color-black: #FFFFFF; */
  }
}