/*
  OLEARIA HUB - PURPLE THEME
  ===========================
  Submarca: Hub (landing principal)
  Color primario: Purple #C084FC
  Uso: Ecosistema Olearia - presentación de productos
*/

[data-product="hub"] {
  /* PRIMARY COLORS - Purple (Bright Violet) */
  --color-primary-50: #faf5ff;
  --color-primary-100: #f3e8ff;
  --color-primary-200: #e9d5ff;
  --color-primary-300: #d8b4fe;
  --color-primary-400: #c084fc;
  --color-primary-500: #a78bfa;
  --color-primary-600: #8b5cf6;
  --color-primary-700: #7c3aed;
  --color-primary-800: #6b21a8;
  --color-primary-900: #581c87;

  /* Primary as RGB for alpha usage */
  --color-primary-rgb: 192, 132, 252;
  --color-primary: var(--color-primary-400);
  --color-accent: var(--color-primary-500);

  /* GRADIENTS - 2026 Enhanced (Multi-stop for depth) */
  --gradient-primary: linear-gradient(135deg,
    #a78bfa 0%,
    #c084fc 35%,
    #d8b4fe 65%,
    #8b5cf6 100%
  );
  --gradient-primary-vertical: linear-gradient(180deg,
    #a78bfa 0%,
    #c084fc 50%,
    #8b5cf6 100%
  );
  --gradient-primary-radial: radial-gradient(circle,
    #c084fc 0%,
    #a78bfa 50%,
    #7c3aed 100%
  );

  /* GLOWS & EFFECTS */
  --glow-primary-sm: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
  --glow-primary-md: 0 0 30px rgba(var(--color-primary-rgb), 0.4);
  --glow-primary-lg: 0 0 40px rgba(var(--color-primary-rgb), 0.5);
  --glow-primary-xl: 0 0 60px rgba(var(--color-primary-rgb), 0.6);

  /* BACKGROUNDS - Purple tinted (lighter) */
  --bg-base: #221d30;
  --bg-elevated-1: #2a2438;
  --bg-elevated-2: #342d47;
  --bg-elevated-3: #3f3856;
  --bg-glass: rgba(42, 36, 56, 0.70);
  --bg-primary: #221d30;
  --bg-secondary: #2a2438;
  --bg-tertiary: #342d47;

  /* BACKGROUND GRADIENTS - Purple tinted */
  --hero-orb-1: radial-gradient(circle, rgba(192, 132, 252, 0.4) 0%, transparent 70%);
  --hero-orb-2: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 70%);

  /* BORDERS WITH PRIMARY COLOR */
  --border-primary: rgba(var(--color-primary-rgb), 0.25);
  --border-primary-hover: rgba(var(--color-primary-rgb), 0.45);
  --border-primary-active: rgba(var(--color-primary-rgb), 0.65);

  /* PRODUCT-SPECIFIC SEMANTIC COLORS */
  --color-ecosystem-primary: #c084fc;
  --color-ecosystem-secondary: #a78bfa;
  --color-ecosystem-tertiary: #8b5cf6;
}

/* COMPONENT OVERRIDES - Hub Specific */

/* Hero Badge Pulse Animation - Purple */
[data-product="hub"] .badge-dot-pulse {
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.7);
  animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-badge-hub {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), 0);
  }
}

/* Text Primary - Purple */
[data-product="hub"] .text-primary {
  color: var(--color-primary);
}

/* CTA Buttons - Purple */
[data-product="hub"] .cta-primary-new {
  background: var(--gradient-primary);
  color: var(--bg-base);
  box-shadow: var(--glow-primary-sm);
}

[data-product="hub"] .cta-primary-new:hover {
  color: var(--bg-base);
  box-shadow: var(--glow-primary-md);
  transform: translateY(-1px);
}

/* Text Glow Effects - Disabled for clean design */
[data-product="hub"] .text-glow-sm,
[data-product="hub"] .text-glow-md,
[data-product="hub"] .text-glow-lg {
  text-shadow: none;
}