/**
 * Variables CSS - Mibu.es
 * Sistema de diseño con tokens de color, tipografía, espaciado y efectos
 * Basado en la identidad visual actual con mejoras modernas
 */

:root {
  /* ========================================
     COLORES - BRAND
     ======================================== */
  --color-primary: #e31e24;
  --color-primary-dark: #b81519;
  --color-primary-light: #ff4449;
  --color-secondary: #1f1f1f;
  --color-secondary-light: #333333;
  --color-secondary-lighter: #555555;

  /* ========================================
     COLORES - UI
     ======================================== */
  --color-background: #ffffff;
  --color-surface: #f5f5f5;
  --color-surface-dark: #e0e0e0;
  --color-text: #1f1f1f;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;

  /* ========================================
     COLORES - CATEGORÍAS
     ======================================== */
  --color-anime: #e31e24;
  --color-videojuegos: #4CAF50;
  --color-kpop: #FF69B4;
  --color-tecnologia: #2196F3;
  --color-juegos-mesa: #FF9800;
  --color-cine: #9C27B0;
  --color-manga: #F44336;
  --color-cosplay: #00BCD4;

  /* ========================================
     COLORES - ESTADOS
     ======================================== */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #f44336;
  --color-info: #2196F3;

  /* ========================================
     TIPOGRAFÍA
     ======================================== */
  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Droid Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Tamaños de fuente */
  --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: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-size-5xl: 3rem;      /* 48px */

  /* Peso de fuente */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Altura de línea */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================
     ESPACIADO
     ======================================== */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */

  /* ========================================
     LAYOUT
     ======================================== */
  --max-width-content: 1200px;
  --max-width-text: 65ch;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;

  --header-height: 80px;
  --header-height-mobile: 64px;
  --footer-height: auto;

  /* Grid */
  --grid-gap: var(--space-lg);
  --grid-gap-sm: var(--space-md);

  /* ========================================
     EFECTOS
     ======================================== */
  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.23);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;

  /* ========================================
     Z-INDEX
     ======================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
     BREAKPOINTS (para JavaScript)
     ======================================== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ========================================
   TEMA OSCURO (opcional para futuro)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Descomentar cuando se implemente modo oscuro */
    /*
    --color-background: #1f1f1f;
    --color-surface: #2a2a2a;
    --color-text: #ffffff;
    --color-text-light: #cccccc;
    --color-border: #444444;
    */
  }
}

/* ========================================
   VARIABLES RESPONSIVE
   ======================================== */
@media (min-width: 768px) {
  :root {
    --font-size-3xl: 2.5rem;    /* 40px en tablet+ */
    --font-size-4xl: 3rem;      /* 48px en tablet+ */
    --font-size-5xl: 3.5rem;    /* 56px en tablet+ */

    --space-3xl: 5rem;          /* 80px en tablet+ */
    --space-4xl: 7rem;          /* 112px en tablet+ */
    --space-5xl: 10rem;         /* 160px en tablet+ */
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-5xl: 4rem;      /* 64px en desktop */
    --space-5xl: 12rem;         /* 192px en desktop */
  }
}