/* Magnedyne brand — CSS custom properties and custom styles */

:root {
  --deep-indigo: #2C003E;
  --electric-purple: #9B59B6;
  --cool-off-white: #F2F4F6;
  --soft-silver: #DCE0E5;
  --midnight-gray: #1A1A1A;
  --magnesium-gray: #B4BDC3;
  --light-slate: #D8DFE6;
  --metallic-purple: #6C3483;
}

/* Brand background colors */
.bg-deep-indigo { background-color: var(--deep-indigo); }
.bg-electric-purple { background-color: var(--electric-purple); }
.bg-cool-off-white { background-color: var(--cool-off-white); }
.bg-midnight-gray { background-color: var(--midnight-gray); }

/* Brand text colors */
.text-deep-indigo { color: var(--deep-indigo); }
.text-electric-purple { color: var(--electric-purple); }
.text-midnight-gray { color: var(--midnight-gray); }
.text-magnesium-gray { color: var(--magnesium-gray); }
.text-metallic-purple { color: var(--metallic-purple); }

/* Borders */
.border-soft-silver { border-color: var(--soft-silver); }
.border-light-slate { border-color: var(--light-slate); }

/* Logo: Exo Regular 400 Italic, optional gradient */
.logo {
  font-family: 'Exo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-style: italic;
  background: linear-gradient(135deg, var(--deep-indigo) 0%, var(--metallic-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
}
.logo:hover {
  filter: brightness(1.1);
}
.logo-on-dark {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  background-clip: unset;
}
.logo-on-dark:hover {
  filter: brightness(1.05);
}

/* Hero background: black with dark rich purple (lean black) */
.hero-bg {
  background: linear-gradient(180deg, #050305 0%, #0d0612 30%, #0a050d 70%, #000000 100%);
}

/* CTA button: Electric Purple, hover Metallic Purple */
.btn-cta {
  background-color: var(--electric-purple);
  color: white;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-cta:hover {
  background-color: var(--metallic-purple);
  box-shadow: 0 0 20px rgba(155, 89, 182, 0.4);
}

/* Product cards hover: Electric Purple shadow/glow */
.card-product:hover {
  border-color: var(--electric-purple);
  box-shadow: 0 0 24px rgba(155, 89, 182, 0.25);
}

/* Header: hidden until scroll past masthead */
.header-hidden {
  transform: translateY(-100%);
}

/* Typography: apply Exo/Orbitron where Tailwind doesn't have them */
.font-exo {
  font-family: 'Exo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.font-orbitron {
  font-family: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}