/* ========== CSS Custom Properties ========== */
:root {
  --ink: #080d1a;
  --ink-light: #0e1629;
  --ink-mid: #151e35;
  --surface: #1a2340;
  --surface-light: #1f2b4d;
  --slate: #64748b;
  --slate-light: #94a3b8;
  --bone: #e2e8f0;
  --white: #f1f5f9;
  --pure: #ffffff;
  --accent: #06d6a0;
  --accent-dim: #05b88a;
  --accent-glow: rgba(6, 214, 160, 0.15);
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --violet: #8b5cf6;
  --rose: #f43f5e;
  --amber: #f59e0b;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --theme-transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

[data-theme="light"] {
  color-scheme: light;
  --ink: #f8fafc;
  --ink-light: #f1f5f9;
  --ink-mid: #e8edf4;
  --surface: #e2e8f0;
  --surface-light: #dce4ee;
  --slate: #64748b;
  --slate-light: #475569;
  --bone: #334155;
  --white: #1e293b;
  --pure: #0f172a;
  --accent: #059669;
  --accent-dim: #047857;
  --accent-glow: rgba(5, 150, 105, 0.12);
  --cyan: #0891b2;
  --blue: #2563eb;
  --violet: #7c3aed;
  --rose: #e11d48;
  --amber: #d97706;
}

/* ========== Keyframe Animations ========== */
@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

@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 pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

@keyframes badge-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(6, 214, 160, 0.3); }
  50% { box-shadow: 0 4px 24px rgba(6, 214, 160, 0.5); }
}