/* ==========================================================================
   Theme: Nebula — Cosmic casino vibes with aurora gradients
   Palette: Indigo / Cyan | Vibe: Cosmic aurora, shooting stars, glowing borders
   Applied to: richmondpal.com
   ========================================================================== */

:root {
  /* Primary palette */
  --color-primary:           #6366f1;
  --color-primary-light:     #a78bfa;
  --color-primary-dark:      #4f46e5;
  --color-secondary:         #22d3ee;
  --color-secondary-light:   #67e8f9;
  --color-accent:            #ec4899;

  /* Backgrounds */
  --color-bg:                #0a0a1e;
  --color-bg-alt:            #141432;
  --color-surface:           #1e1e42;
  --color-surface-hover:     #2a2a56;
  --color-surface-border:    rgba(99, 102, 241, 0.18);

  /* Text */
  --color-text:              #e2e8f0;
  --color-text-secondary:    #94a3b8;
  --color-text-muted:        #64748b;
  --color-heading:           #ffffff;

  /* CTA */
  --color-cta:               #6366f1;
  --color-cta-hover:         #4f46e5;
  --color-cta-text:          #ffffff;
  --gradient-cta:            linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);

  /* Gradients & effects */
  --gradient-hero:           linear-gradient(135deg, #0a0a1e 40%, #0f1a3a 100%);
  --gradient-card:           linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, rgba(34, 211, 238, 0.05) 100%);
  --shadow-card:             0 10px 25px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:       0 14px 35px rgba(99, 102, 241, 0.25);
  --shadow-glow:             0 0 20px rgba(99, 102, 241, 0.4);
  --shadow-cta:              0 4px 24px rgba(99, 102, 241, 0.5);
  --border-glow:             1px solid rgba(99, 102, 241, 0.18);

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

  /* Typography */
  --font-heading:            'Inter', 'SF Pro Display', system-ui, sans-serif;
  --font-body:               'Inter', 'SF Pro Text', system-ui, sans-serif;
  --font-mono:               'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs:            0.75rem;
  --font-size-sm:            0.875rem;
  --font-size-base:          1rem;
  --font-size-lg:            1.125rem;
  --font-size-xl:            1.25rem;
  --font-size-2xl:           1.5rem;
  --font-size-3xl:           1.875rem;
  --font-size-4xl:           2.25rem;
  --font-weight-normal:      400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --font-weight-extrabold:   800;

  /* Spacing */
  --space-xs:                0.25rem;
  --space-sm:                0.5rem;
  --space-md:                1rem;
  --space-lg:                1.5rem;
  --space-xl:                2rem;
  --space-2xl:               3rem;
  --space-3xl:               4rem;

  /* Transitions */
  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;
  --transition-slow:         400ms ease;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes nebula-border-pulse {
  0%, 100% { border-color: rgba(99, 102, 241, 0.18); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); }
  50%       { border-color: rgba(34, 211, 238, 0.6);  box-shadow: 0 0 24px rgba(34, 211, 238, 0.4);  }
}

@keyframes nebula-aurora-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes nebula-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

/* --------------------------------------------------------------------------
   Casino components
   -------------------------------------------------------------------------- */

.casino-card {
  background: var(--gradient-card);
  border: var(--border-glow);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.casino-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--gradient-cta);
  color: var(--color-cta-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border: none;
  border-radius: var(--border-radius-full);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 48px;
  min-width: 48px;
}
.cta-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 32px rgba(124, 58, 237, 0.65);
}
.cta-button:active {
  transform: translateY(0) scale(0.99);
}

.bonus-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: linear-gradient(135deg, #ec4899, #6366f1);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--border-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rating-stars {
  display: inline-flex;
  gap: 2px;
  color: #ec4899;
  font-size: var(--font-size-lg);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.875rem;
    --space-2xl:     2rem;
    --space-3xl:     2.5rem;
  }
  .cta-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-2xl: 1.25rem;
    --font-size-3xl: 1.375rem;
    --space-xl:      1.5rem;
  }
}