/**
 * Tokens estruturais compartilhados pelos templates da loja.
 *
 * Não declare cores neste arquivo. Cada família visual fornece a paleta em
 * templates/<template>/Styles/<cor>.css (por exemplo: luxe/gold.css).
 */

:root {
  /* === TIPOGRAFIA === */
  --luxe-font-primary: 'Playfair Display', serif;
  --luxe-font-secondary: 'Inter', sans-serif;
  
  --luxe-text-xs: 0.75rem;     /* 12px */
  --luxe-text-sm: 0.875rem;    /* 14px */
  --luxe-text-base: 1rem;      /* 16px */
  --luxe-text-lg: 1.125rem;    /* 18px */
  --luxe-text-xl: 1.25rem;     /* 20px */
  --luxe-text-2xl: 1.5rem;     /* 24px */
  --luxe-text-3xl: 1.875rem;   /* 30px */
  --luxe-text-4xl: 2.25rem;    /* 36px */
  --luxe-text-5xl: 3rem;       /* 48px */
  --luxe-text-6xl: 3.75rem;    /* 60px */
  
  --luxe-font-light: 300;
  --luxe-font-normal: 400;
  --luxe-font-medium: 500;
  --luxe-font-semibold: 600;
  --luxe-font-bold: 700;
  
  --luxe-leading-tight: 1.25;
  --luxe-leading-snug: 1.375;
  --luxe-leading-normal: 1.5;
  --luxe-leading-relaxed: 1.625;
  --luxe-leading-loose: 2;
  
  /* === ESPAÇAMENTO === */
  --luxe-space-1: 0.25rem;     /* 4px */
  --luxe-space-2: 0.5rem;      /* 8px */
  --luxe-space-3: 0.75rem;     /* 12px */
  --luxe-space-4: 1rem;        /* 16px */
  --luxe-space-5: 1.25rem;     /* 20px */
  --luxe-space-6: 1.5rem;      /* 24px */
  --luxe-space-8: 2rem;        /* 32px */
  --luxe-space-10: 2.5rem;     /* 40px */
  --luxe-space-12: 3rem;       /* 48px */
  --luxe-space-16: 4rem;       /* 64px */
  --luxe-space-20: 5rem;       /* 80px */
  --luxe-space-24: 6rem;       /* 96px */
  
  /* === BORDAS === */
  --luxe-radius-sm: 0.125rem;   /* 2px */
  --luxe-radius: 0.25rem;       /* 4px */
  --luxe-radius-md: 0.375rem;   /* 6px */
  --luxe-radius-lg: 0.5rem;     /* 8px */
  --luxe-radius-xl: 0.75rem;    /* 12px */
  --luxe-radius-2xl: 1rem;      /* 16px */
  --luxe-radius-3xl: 1.5rem;    /* 24px */
  --luxe-radius-full: 9999px;
  
  --luxe-border-width: 1px;
  --luxe-border-width-2: 2px;
  --luxe-border-width-4: 4px;
  --luxe-border-width-8: 8px;
  
  /* === TRANSIÇÕES === */
  --luxe-transition-fast: 150ms ease-in-out;
  --luxe-transition-normal: 300ms ease-in-out;
  --luxe-transition-slow: 500ms ease-in-out;
  
  --luxe-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --luxe-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --luxe-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* === Z-INDEX === */
  --luxe-z-dropdown: 1000;
  --luxe-z-sticky: 1020;
  --luxe-z-fixed: 1030;
  --luxe-z-modal-backdrop: 1040;
  --luxe-z-modal: 1050;
  --luxe-z-popover: 1060;
  --luxe-z-tooltip: 1070;
  --luxe-z-toast: 1080;
  
  /* === BREAKPOINTS === */
  --luxe-screen-sm: 640px;
  --luxe-screen-md: 768px;
  --luxe-screen-lg: 1024px;
  --luxe-screen-xl: 1280px;
  --luxe-screen-2xl: 1536px;
  
  /* === CONTAINER === */
  --luxe-container-sm: 640px;
  --luxe-container-md: 768px;
  --luxe-container-lg: 1024px;
  --luxe-container-xl: 1280px;
  --luxe-container-2xl: 1536px;
}

/* === CLASSES UTILITÁRIAS === */
.luxe-text-gradient {
  background: var(--luxe-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.luxe-bg-gradient {
  background: var(--luxe-gradient-primary);
}

.luxe-bg-gradient-dark {
  background: var(--luxe-gradient-dark);
}

.luxe-shadow-gold {
  box-shadow: var(--luxe-shadow-gold);
}

.luxe-shadow-dark {
  box-shadow: var(--luxe-shadow-dark);
}

/* === ANIMAÇÕES PERSONALIZADAS === */
@keyframes luxe-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes luxe-pulse-gold {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--luxe-gold-glow);
  }
  50% {
    box-shadow: 0 0 0 10px var(--luxe-gold-transparent);
  }
}

@keyframes luxe-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.luxe-shimmer {
  animation: luxe-shimmer 2s infinite;
  background: linear-gradient(
    90deg,
    var(--luxe-gray-200) 25%,
    var(--luxe-gray-100) 50%,
    var(--luxe-gray-200) 75%
  );
  background-size: 200px 100%;
}

.luxe-pulse-gold {
  animation: luxe-pulse-gold 2s infinite;
}

.luxe-float {
  animation: luxe-float 3s ease-in-out infinite;
}