/* ========== Design Tokens ========== */
:root {
  /* Brand */
  --blue: #2563EB;
  --blue-light: #3B82F6;
  --blue-dark: #1D4ED8;
  --orange: #EA580C;
  --orange-light: #F97316;
  --orange-dark: #C2410C;

  /* Surfaces */
  --bg: #F8FAFC;
  --bg-alt: #F1F5F9;
  --surface: #FFFFFF;
  --dark: #0F172A;
  --dark-mid: #1E293B;

  /* Text */
  --text: #1E293B;
  --text-light: #475569;
  --text-muted: #64748B;
  --text-on-dark: #E2E8F0;
  --text-muted-dark: #94A3B8;

  /* Borders */
  --border: #E2E8F0;
  --border-light: #F1F5F9;

  /* Font */
  --font: 'Nunito', system-ui, -apple-system, sans-serif;

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Gradients — match app buttons */
  --gradient-blue: linear-gradient(135deg, #3B82F6, #2563EB);
  --gradient-orange: linear-gradient(135deg, #F97316, #EA580C);
  --gradient-dark: linear-gradient(135deg, #0F172A, #1E293B);
}

/* ========== Keyframes ========== */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -40px); }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(20px, -30px) rotate(5deg); }
  66% { transform: translate(-15px, 15px) rotate(-3deg); }
}

@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateY(-110vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}