/*
  Sistema de diseño VibeShop
  Paleta: rosado suave + blanco + gris claro + detalles dorados.
  Todas las demás hojas de estilo consumen estas variables — cambiar el
  look-and-feel global (por ejemplo desde Configuraciones) solo requiere
  tocar este archivo o sobreescribir estas variables en :root.
*/

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

:root {
  /* ===== Colores de marca ===== */
  --color-primary: #f7c6d9;
  --color-primary-light: #fce4ee;
  --color-primary-dark: #e8a9c4;
  --color-secondary: #d4af37;
  --color-secondary-light: #e8cc7a;
  --color-secondary-dark: #b8912b;

  /* ===== Neutrales ===== */
  --color-white: #ffffff;
  --color-gray-lightest: #faf8f9;
  --color-gray-light: #f5f3f4;
  --color-gray-medium: #d9d3d6;
  --color-gray-dark: #8a8286;
  --color-black: #201c1e;

  /* ===== Texto ===== */
  --color-text: #2b2b2b;
  --color-text-muted: #767077;
  --color-text-inverse: #ffffff;

  /* ===== Estados ===== */
  --color-success: #4caf50;
  --color-success-bg: #e8f5e9;
  --color-warning: #ff9800;
  --color-warning-bg: #fff3e0;
  --color-danger: #e53935;
  --color-danger-bg: #fdecea;
  --color-info: #2196f3;
  --color-info-bg: #e3f2fd;

  /* ===== Estados de producto ===== */
  --color-estado-disponible: #4caf50;
  --color-estado-reservado: #ff9800;
  --color-estado-agotado: #e53935;
  --color-estado-oculto: #8a8286;

  /* ===== Tipografía ===== */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-xxl: 2.25rem;
  --fs-display: 3rem;

  /* ===== Espaciado ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* ===== Bordes y radios ===== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-color: #ece7e9;

  /* ===== Sombras ===== */
  --shadow-sm: 0 2px 6px rgba(32, 28, 30, 0.06);
  --shadow-md: 0 6px 16px rgba(32, 28, 30, 0.10);
  --shadow-lg: 0 12px 32px rgba(32, 28, 30, 0.14);
  --shadow-gold: 0 4px 14px rgba(212, 175, 55, 0.35);

  /* ===== Transiciones ===== */
  --transition-fast: 0.15s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== Layout ===== */
  --header-height: 72px;
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 76px;
  --container-max: 1280px;

  /* ===== Breakpoints (referencia, usados en media queries) =====
     mobile:  hasta 576px
     tablet:  577px - 1024px
     desktop: desde 1025px
  */
}