/*
  LunchBox browser compatibility overrides
  =========================================
  Tailwind v4 generates oklch() for all colors and "in oklab" for gradient
  directions — both require Chrome 111+. This file is served as a plain static
  file so it is never processed by Tailwind. It contains unlayered CSS, which
  the browser cascade spec guarantees wins over any @layer rule (Tailwind puts
  everything in @layer theme / @layer utilities) regardless of load order.

  Color hex values are the sRGB equivalents of Tailwind v4's oklch palette.
*/

/* ── Color variables ─────────────────────────────────────────────────────── */
:root {
  --color-blue-50:      #eff6ff;
  --color-blue-100:     #dbeafe;
  --color-blue-200:     #bfdbfe;
  --color-blue-300:     #93c5fd;
  --color-blue-400:     #60a5fa;
  --color-blue-500:     #3b82f6;
  --color-blue-600:     #2563eb;
  --color-blue-700:     #1d4ed8;
  --color-blue-800:     #1e40af;
  --color-blue-900:     #1e3a8a;

  --color-orange-50:    #fff7ed;
  --color-orange-100:   #ffedd5;
  --color-orange-200:   #fed7aa;
  --color-orange-300:   #fdba74;
  --color-orange-400:   #fb923c;
  --color-orange-500:   #f97316;
  --color-orange-600:   #ea580c;
  --color-orange-700:   #c2410c;
  --color-orange-800:   #9a3412;

  --color-red-50:       #fef2f2;
  --color-red-100:      #fee2e2;
  --color-red-200:      #fecaca;
  --color-red-300:      #fca5a5;
  --color-red-400:      #f87171;
  --color-red-500:      #ef4444;
  --color-red-600:      #dc2626;
  --color-red-700:      #b91c1c;
  --color-red-800:      #991b1b;

  --color-yellow-50:    #fefce8;
  --color-yellow-100:   #fef9c3;
  --color-yellow-200:   #fef08a;
  --color-yellow-300:   #fde047;
  --color-yellow-400:   #facc15;
  --color-yellow-500:   #eab308;
  --color-yellow-600:   #ca8a04;
  --color-yellow-700:   #a16207;
  --color-yellow-800:   #854d0e;

  --color-green-50:     #f0fdf4;
  --color-green-100:    #dcfce7;
  --color-green-200:    #bbf7d0;
  --color-green-300:    #86efac;
  --color-green-400:    #4ade80;
  --color-green-500:    #22c55e;
  --color-green-600:    #16a34a;
  --color-green-700:    #15803d;
  --color-green-800:    #166534;

  --color-emerald-50:   #ecfdf5;
  --color-emerald-100:  #d1fae5;
  --color-emerald-200:  #a7f3d0;
  --color-emerald-500:  #10b981;
  --color-emerald-600:  #059669;
  --color-emerald-700:  #047857;

  --color-teal-50:      #f0fdfa;
  --color-teal-100:     #ccfbf1;
  --color-teal-500:     #14b8a6;
  --color-teal-600:     #0d9488;
  --color-teal-700:     #0f766e;

  --color-cyan-50:      #ecfeff;
  --color-cyan-100:     #cffafe;
  --color-cyan-500:     #06b6d4;
  --color-cyan-600:     #0891b2;

  --color-violet-50:    #f5f3ff;
  --color-violet-100:   #ede9fe;
  --color-violet-200:   #ddd6fe;
  --color-violet-500:   #8b5cf6;
  --color-violet-600:   #7c3aed;
  --color-violet-700:   #6d28d9;

  --color-fuchsia-50:   #fdf4ff;
  --color-fuchsia-100:  #fae8ff;
  --color-fuchsia-500:  #d946ef;
  --color-fuchsia-600:  #c026d3;

  --color-pink-50:      #fdf2f8;
  --color-pink-100:     #fce7f3;
  --color-pink-200:     #fbcfe8;
  --color-pink-300:     #f9a8d4;
  --color-pink-400:     #f472b6;
  --color-pink-500:     #ec4899;
  --color-pink-600:     #db2777;
  --color-pink-700:     #be185d;
  --color-pink-800:     #9d174d;

  --color-rose-50:      #fff1f2;
  --color-rose-100:     #ffe4e6;
  --color-rose-200:     #fecdd3;
  --color-rose-300:     #fda4af;
  --color-rose-400:     #fb7185;
  --color-rose-500:     #f43f5e;
  --color-rose-600:     #e11d48;
  --color-rose-700:     #be123c;
  --color-rose-800:     #9f1239;

  --color-indigo-50:    #eef2ff;
  --color-indigo-100:   #e0e7ff;
  --color-indigo-200:   #c7d2fe;
  --color-indigo-500:   #6366f1;
  --color-indigo-600:   #4f46e5;
  --color-indigo-700:   #4338ca;
  --color-indigo-800:   #3730a3;
  --color-indigo-900:   #312e81;

  --color-purple-50:    #faf5ff;
  --color-purple-100:   #f3e8ff;
  --color-purple-500:   #a855f7;
  --color-purple-600:   #9333ea;

  --color-slate-50:     #f8fafc;
  --color-slate-100:    #f1f5f9;
  --color-slate-200:    #e2e8f0;
  --color-slate-300:    #cbd5e1;
  --color-slate-400:    #94a3b8;
  --color-slate-500:    #64748b;
  --color-slate-600:    #475569;
  --color-slate-700:    #334155;
  --color-slate-800:    #1e293b;
  --color-slate-900:    #0f172a;

  --color-gray-50:      #f9fafb;
  --color-gray-100:     #f3f4f6;
  --color-gray-200:     #e5e7eb;
  --color-gray-300:     #d1d5db;
  --color-gray-400:     #9ca3af;
  --color-gray-500:     #6b7280;
  --color-gray-600:     #4b5563;
  --color-gray-700:     #374151;
  --color-gray-800:     #1f2937;
  --color-gray-900:     #111827;

  --color-zinc-50:      #fafafa;
  --color-zinc-100:     #f4f4f5;
  --color-zinc-200:     #e4e4e7;
  --color-zinc-300:     #d4d4d8;
  --color-zinc-400:     #a1a1aa;
  --color-zinc-500:     #71717a;
  --color-zinc-600:     #52525b;
  --color-zinc-700:     #3f3f46;
  --color-zinc-800:     #27272a;
  --color-zinc-900:     #18181b;

  --color-neutral-50:   #fafafa;
  --color-neutral-100:  #f5f5f5;
  --color-neutral-200:  #e5e5e5;
  --color-neutral-300:  #d4d4d4;
  --color-neutral-400:  #a3a3a3;
  --color-neutral-500:  #737373;
  --color-neutral-600:  #525252;
  --color-neutral-700:  #404040;
  --color-neutral-800:  #262626;
  --color-neutral-900:  #171717;

  --color-stone-50:     #fafaf9;
  --color-stone-100:    #f5f5f4;
  --color-stone-200:    #e7e5e4;
  --color-stone-300:    #d6d3d1;
  --color-stone-400:    #a8a29e;
  --color-stone-500:    #78716c;
  --color-stone-600:    #57534e;
  --color-stone-700:    #44403c;
  --color-stone-800:    #292524;
  --color-stone-900:    #1c1917;

  --color-sky-50:       #f0f9ff;
  --color-sky-100:      #e0f2fe;
  --color-sky-500:      #0ea5e9;
  --color-sky-600:      #0284c7;
}

/* ── Gradient direction fix ──────────────────────────────────────────────── */
/*
  Tailwind v4 sets --tw-gradient-position to "to right in oklab" etc.
  That value is then embedded inside --tw-gradient-stops, making the final
  linear-gradient() call invalid on Chrome < 111. Override just the position
  variable here; the rest of the gradient system (stops, from/to colors)
  continues to work unchanged.
*/
.bg-gradient-to-t  { --tw-gradient-position: to top; }
.bg-gradient-to-tr { --tw-gradient-position: to top right; }
.bg-gradient-to-r  { --tw-gradient-position: to right; }
.bg-gradient-to-br { --tw-gradient-position: to bottom right; }
.bg-gradient-to-b  { --tw-gradient-position: to bottom; }
.bg-gradient-to-bl { --tw-gradient-position: to bottom left; }
.bg-gradient-to-l  { --tw-gradient-position: to left; }
.bg-gradient-to-tl { --tw-gradient-position: to top left; }