@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Orbitron:wght@400;700;900&display=swap');

:root {
  /* ── Background ── */
  --bg:           #07051A;
  --bg-2:         #0D0826;
  --bg-3:         #130D2E;

  /* ── Surface (Glass Cards) ── */
  --surface:        rgba(220, 170, 240, 0.06);
  --surface-hover:  rgba(255, 160, 220, 0.11);
  --surface-active: rgba(255, 160, 220, 0.17);
  --surface-modal:  rgba(10, 6, 28, 0.88);

  /* ── Borders ── */
  --border:        rgba(255, 140, 210, 0.18);
  --border-mid:    rgba(255, 130, 200, 0.35);
  --border-bright: rgba(255, 110, 190, 0.65);

  /* ── Text ── */
  --text-primary:   #F2E6FF;
  --text-secondary: rgba(242, 230, 255, 0.62);
  --text-muted:     rgba(242, 230, 255, 0.35);
  --text-on-btn:    #fff;

  /* ── Brand Palette ── */
  --pink:          #FF6EB4;
  --pink-light:    #FFB3DA;
  --pink-pale:     #FFE4F3;
  --pink-dark:     #D9187E;
  --lavender:      #C9A0FF;
  --lavender-light:#E4D4FF;
  --rose:          #FF8FAB;
  --mint:          #A8FFD8;
  --silver:        #D6CEEE;
  --cream:         #FFF0FB;

  /* ── Gradients ── */
  --grad-primary:  linear-gradient(135deg, #FF6EB4 0%, #C9A0FF 100%);
  --grad-holo:     linear-gradient(135deg, #FF6EB4, #C9A0FF, #A0C4FF, #FFB3D9, #FF89CF, #C9A0FF);
  --grad-surface:  linear-gradient(135deg, rgba(255,110,180,0.09), rgba(201,160,255,0.09));
  --grad-btn:      linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 100%);
  --grad-dark:     linear-gradient(180deg, rgba(7,5,26,0) 0%, rgba(7,5,26,0.95) 100%);

  /* ── Shadows & Glows ── */
  --glow-pink:    0 0 18px rgba(255,110,180,0.55), 0 0 40px rgba(255,110,180,0.2);
  --glow-lavender:0 0 18px rgba(201,160,255,0.55), 0 0 40px rgba(201,160,255,0.2);
  --glow-combo:   0 0 22px rgba(255,110,180,0.4),  0 0 50px rgba(201,160,255,0.3);
  --glow-sm:      0 0 10px rgba(255,110,180,0.4);
  --shadow-card:  0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(255,110,180,0.08);
  --shadow-btn:   0 4px 20px rgba(255,110,180,0.4), 0 2px 4px rgba(0,0,0,0.3);

  /* ── Spacing ── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;

  /* ── Radii ── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   36px;
  --r-pill: 9999px;

  /* ── Transitions ── */
  --t-fast:   all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-mid:    all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --t-bounce: all 0.4s  cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-slow:   all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-base:    1;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}