/**
 * Design System Premium — Cinematic Space Romance
 * Tokens para experiência imersiva de aniversário
 */

:root {
  /* === Base escura profunda === */
  --bg-deep: #0B0F1A;
  --bg-dark: #111827;
  --bg-elevated: #1A1F2E;
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);

  /* === Cores emocionais principais === */
  --color-nebula: #7C3AED;
  --color-aurora: #F472B6;
  --color-ethereal: #38BDF8;
  --color-gold: #FBBF24;
  --color-light: #F9FAFB;

  /* === Texto === */
  --text-primary: #F9FAFB;
  --text-muted: #B8B8C2;
  --text-subtle: rgba(184, 184, 194, 0.7);

  /* === Gradientes obrigatórios === */
  --gradient-deep: linear-gradient(180deg, #0B0F1A 0%, #111827 40%, #1A1F2E 100%);
  --gradient-nebula-ethereal: linear-gradient(135deg, #7C3AED 0%, #38BDF8 100%);
  --gradient-aurora-nebula: linear-gradient(135deg, #F472B6 0%, #7C3AED 100%);
  --gradient-ethereal-fade: linear-gradient(180deg, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
  --gradient-glow-radial: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124, 58, 237, 0.15), transparent 50%);
  --gradient-glow-warm: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(244, 114, 182, 0.12), transparent 50%);
  --gradient-glow-cool: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(56, 189, 248, 0.1), transparent 60%);
  --gradient-line: linear-gradient(90deg, transparent, var(--planet-muted, #b8b8c2), transparent);
  --gradient-line-subtle: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);

  /* === Glow & sombras === */
  --glow-accent: rgba(124, 58, 237, 0.4);
  --glow-aurora: rgba(244, 114, 182, 0.35);
  --glow-ethereal: rgba(56, 189, 248, 0.3);
  --glow-gold: rgba(251, 191, 36, 0.4);
  --glow-warm: rgba(255, 220, 180, 0.12);
  --glow-soft: 0 0 60px rgba(124, 58, 237, 0.08);
  --shadow-card: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6);

  /* === Blur === */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
  --blur-xl: 32px;

  /* === Radius === */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 1.75rem;
  --radius-full: 9999px;

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

  /* === Safe areas === */
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);

  /* === Transições === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.6s;

  /* === Touch targets === */
  --touch-min: 44px;
  --touch-min-sm: 48px;
}