:root {
  --ff-font-base: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --ff-color-primary: #1b82ff;
  --ff-color-secondary: #7cf5ff;
  --ff-color-accent: #ff7ad9;
  --ff-color-success: #3bffb0;
  --ff-color-warning: #ffd166;
  --ff-color-danger: #ff5f6d;
  --ff-color-surface: #0a1729;
  --ff-color-surface-2: #0f2239;
  --ff-color-elevated: rgba(255, 255, 255, 0.08);
  --ff-color-border: rgba(255, 255, 255, 0.12);
  --ff-text-strong: #e9f2ff;
  --ff-text-dim: #9fb4d5;
  --ff-radius-sm: 10px;
  --ff-radius-md: 16px;
  --ff-radius-lg: 24px;
  --ff-blur-strong: blur(28px);
  --ff-blur-heavy: blur(48px);
  --ff-shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.35);
  --ff-shadow-glow: 0 0 40px rgba(124, 245, 255, 0.3);
  --ff-breakpoint-xs: 480px;
  --ff-breakpoint-sm: 640px;
  --ff-breakpoint-md: 768px;
  --ff-breakpoint-lg: 1024px;
  --ff-breakpoint-xl: 1280px;
  --ff-breakpoint-2xl: 1536px;
  --ff-grad-01: linear-gradient(135deg, #1b82ff, #7cf5ff);
  --ff-grad-02: linear-gradient(135deg, #ff7ad9, #7cf5ff);
  --ff-grad-03: linear-gradient(120deg, #0f0c29, #302b63, #24243e);
  --ff-grad-04: conic-gradient(from 90deg at 50% 50%, #1b82ff, #7cf5ff, #ff7ad9, #1b82ff);
  --ff-grad-05: radial-gradient(circle at 20% 20%, rgba(124, 245, 255, 0.35), transparent 40%),
               radial-gradient(circle at 80% 0%, rgba(255, 122, 217, 0.4), transparent 30%),
               linear-gradient(180deg, #0c1324, #0a0f1a);
  --ff-grad-holo: conic-gradient(from 180deg, #64c8ff, #ff9df5, #ffd166, #7cf5ff, #64c8ff);
}

@media (max-width: 640px) {
  :root {
    --ff-radius-lg: 18px;
    --ff-radius-md: 12px;
  }
}