/* ============================================
   FORMFIELD BRAND TOKENS — BLUE THEME
   ============================================ */

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

:root {
  /* ── Primary Colors ── */
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-400: #60A5FA;
  --blue-300: #93C5FD;
  --blue-200: #BFDBFE;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  /* ── Accent / Gradient End ── */
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-400: #A78BFA;

  /* ── Gradient ── */
  --gradient-primary: linear-gradient(135deg, #3B82F6, #8B5CF6);
  --gradient-primary-hover: linear-gradient(135deg, #2563EB, #7C3AED);
  --gradient-radial: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.15), transparent 60%);
  --gradient-dark-bg: linear-gradient(180deg, #0B1120 0%, #111827 100%);
  --gradient-card: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.05));

  /* ── Dark Surfaces ── */
  --surface-900: #0B1120;
  --surface-800: #111827;
  --surface-700: #1E293B;
  --surface-600: #334155;

  /* ── Light Surfaces ── */
  --surface-50:  #F8FAFC;
  --surface-100: #F1F5F9;
  --surface-200: #E2E8F0;

  /* ── Text ── */
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-dark: #0F172A;
  --text-dark-secondary: #475569;

  /* ── Borders & Glows ── */
  --border-subtle: rgba(59, 130, 246, 0.15);
  --border-medium: rgba(59, 130, 246, 0.3);
  --glow-blue: 0 0 40px rgba(59, 130, 246, 0.2);
  --glow-blue-strong: 0 0 60px rgba(59, 130, 246, 0.3), 0 0 120px rgba(139, 92, 246, 0.1);

  /* ── Typography ── */
  --font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── Radius ── */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;
}