/* ============================================================
   WattFarmer UI — Design tokens, Color Palette & Gradients
   Single source of truth for all application colors.
   ============================================================ */

:root {
  /* ── Palette: full ramps ──────────────────────────────────────
     50-200 = surfaces and subtle fills
     300-400 = borders and disabled text
     500-600 = the colour "itself", safe on white
     700-900 = text on tinted surfaces, hover/pressed states       */

  /* Neutral */
  --wf-gray-25:  #f8fafc;
  --wf-gray-50:  #f1f5f9;
  --wf-gray-100: #eaeff5;
  --wf-gray-200: #e2e8f0;
  --wf-gray-300: #cbd5e1;
  --wf-gray-400: #94a3b8;
  --wf-gray-500: #64748b;
  --wf-gray-600: #475569;
  --wf-gray-700: #334155;
  --wf-gray-800: #1e293b;
  --wf-gray-900: #0f172a;

  /* Blue — primary */
  --wf-blue-50:  #eff6ff;
  --wf-blue-100: #dbeafe;
  --wf-blue-200: #bfdbfe;
  --wf-blue-300: #93c5fd;
  --wf-blue-400: #60a5fa;
  --wf-blue-500: #3b82f6;
  --wf-blue-600: #2563eb;
  --wf-blue-700: #1d4ed8;
  --wf-blue-800: #1e40af;
  --wf-blue-900: #1e3a8a;

  /* Red — destructive, overdue, rejected */
  --wf-red-50:   #fef2f2;
  --wf-red-100:  #fee2e2;
  --wf-red-200:  #fecaca;
  --wf-red-300:  #fca5a5;
  --wf-red-400:  #f87171;
  --wf-red-500:  #ef4444;
  --wf-red-600:  #dc2626;
  --wf-red-700:  #b91c1c;
  --wf-red-800:  #991b1b;
  --wf-red-900:  #7f1d1d;

  /* Green — success, accepted, active */
  --wf-green-50:  #f0fdf4;
  --wf-green-100: #dcfce7;
  --wf-green-200: #bbf7d0;
  --wf-green-300: #86efac;
  --wf-green-400: #4ade80;
  --wf-green-500: #22c55e;
  --wf-green-600: #16a34a;
  --wf-green-700: #15803d;
  --wf-green-800: #166534;
  --wf-green-900: #14532d;

  /* Amber — warning, pending, awaiting action */
  --wf-amber-50:  #fffbeb;
  --wf-amber-100: #fef3c7;
  --wf-amber-200: #fde68a;
  --wf-amber-300: #fcd34d;
  --wf-amber-400: #fbbf24;
  --wf-amber-500: #f59e0b;
  --wf-amber-600: #d97706;
  --wf-amber-700: #b45309;
  --wf-amber-800: #92400e;
  --wf-amber-900: #78350f;

  /* Teal — informational */
  --wf-teal-50:  #f0fdfa;
  --wf-teal-100: #ccfbf1;
  --wf-teal-200: #99f6e4;
  --wf-teal-300: #5eead4;
  --wf-teal-400: #2dd4bf;
  --wf-teal-500: #14b8a6;
  --wf-teal-600: #0d9488;
  --wf-teal-700: #0f766e;
  --wf-teal-800: #115e59;
  --wf-teal-900: #134e4a;

  /* Purple — evaluation, specialized statuses, accents */
  --wf-purple-50:  #f5f3ff;
  --wf-purple-100: #ede9fe;
  --wf-purple-200: #ddd6fe;
  --wf-purple-300: #c4b5fd;
  --wf-purple-400: #a78bfa;
  --wf-purple-500: #8b5cf6;
  --wf-purple-600: #7c3aed;
  --wf-purple-700: #6d28d9;
  --wf-purple-800: #5b21b6;
  --wf-purple-900: #4c1d95;

  --wf-white: #ffffff;

  /* ── Gradients ─────────────────────────────────────────────── */
  --wf-gradient-primary:   linear-gradient(135deg, var(--wf-blue-600) 0%, var(--wf-blue-800) 100%);
  --wf-gradient-accent:    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --wf-gradient-header:    linear-gradient(135deg, #1e3a5f 0%, var(--wf-blue-600) 100%);
  --wf-gradient-surface:   linear-gradient(180deg, var(--wf-white) 0%, var(--wf-gray-50) 100%);
  --wf-gradient-success:   linear-gradient(135deg, var(--wf-green-500) 0%, var(--wf-green-700) 100%);
  --wf-gradient-warning:   linear-gradient(135deg, var(--wf-amber-400) 0%, var(--wf-amber-600) 100%);
  --wf-gradient-danger:    linear-gradient(135deg, var(--wf-red-500) 0%, var(--wf-red-700) 100%);
  --wf-gradient-purple:    linear-gradient(135deg, var(--wf-purple-500) 0%, var(--wf-purple-700) 100%);
  --wf-gradient-dark:      linear-gradient(135deg, var(--wf-gray-800) 0%, var(--wf-gray-900) 100%);
  --wf-gradient-glow:      radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(255, 255, 255, 0) 70%);

  /* ── Semantic Aliases ──────────────────────────────────────── */
  --wf-color-primary:        var(--wf-blue-800);
  --wf-color-primary-light:  var(--wf-blue-600);
  --wf-color-primary-dark:   var(--wf-blue-900);
  --wf-color-secondary:      var(--wf-gray-500);
  --wf-color-success:        var(--wf-green-600);
  --wf-color-danger:         var(--wf-red-600);
  --wf-color-warning:        var(--wf-amber-600);
  --wf-color-info:           var(--wf-teal-600);
  --wf-color-purple:         var(--wf-purple-500);

  --wf-surface:              var(--wf-white);
  --wf-surface-subtle:       var(--wf-gray-50);
  --wf-surface-hover:        var(--wf-gray-25);
  --wf-surface-accent:       var(--wf-blue-50);
  --wf-border:               var(--wf-gray-200);
  --wf-border-subtle:        var(--wf-gray-100);
  --wf-border-hover:         var(--wf-gray-300);
  --wf-border-focus:         var(--wf-blue-600);

  --wf-text:                 var(--wf-gray-900);
  --wf-text-secondary:       var(--wf-gray-600);
  --wf-text-muted:           var(--wf-gray-500);
  --wf-text-subtle:          var(--wf-gray-400);
  --wf-text-placeholder:     var(--wf-gray-300);
  --wf-text-on-accent:       var(--wf-white);
}