/*

  This file contains variables which refer directly to colors.
  It should act as a convenience for referring to colors by name
  elsewhere in the app.

  The variable names should be the color they represent, and not
  abstract names. Abstract names should be used elsewhere in the 
  app, and should refer back to colors listed here, rather than
  using hex codes or rgb etc. directly

  10 shades each of:
    - blue
    - gray
    - green
    - indigo
    - orange
    - pink
    - purple
    - red
    - scampi
    - yellow

  One source of these palletes is from https://uicolors.app which
  allows you to enter a single colour and it will automatically
  generate 11 shades. Most of these colours have 10 shades though
  and I think were generated using a different app.
*/

:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-850: #18212f;
  --gray-900: #111827;
  --green-50: #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;
  --indigo-50: #f0f5ff;
  --indigo-100: #e5e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --purple-50: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #4c1d95;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  /* uicolors.app/shared/1357a0c5-8817-49df-ae04-12a200419219 */
  --scampi-50: #f4f5f9;
  --scampi-100: #eaeef5;
  --scampi-200: #d9dfec;
  --scampi-300: #c1cae0;
  --scampi-400: #a8afd1;
  --scampi-500: #9197c3;
  --scampi-600: #7a7cb1;
  --scampi-700: #626394;
  --scampi-800: #55567e;
  --scampi-900: #494b66;
  --scampi-950: #2b2c3b;
  --yellow-25: #fffdf5;
  --yellow-50: #fffbeb;
  --yellow-100: #fef3c7;
  --yellow-200: #fde68a;
  --yellow-300: #fcd34d;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b;
  --yellow-600: #d97706;
  --yellow-700: #b45309;
  --yellow-800: #92400e;
  --yellow-900: #78350f;
  --yellow-950: #421800;

  /* Moved from colors.css */

  --light-blue: #f0f7ff;
  --medium-blue: #bddbff;
  --light-purple: #f8f8fc;
  --medium-purple: #ececfa;
  --dark-purple: #626398;
  --dark-blue: #172a3a;
  --dark-gray: #828489;
  --medium-gray: #ced0ce;
  --light-gray: #ddd;
  --lightest-gray: #efefef;
  --imessage-gray: #e9e9eb;
  --window-gray: #f1f1f1;
  --blue-gray: #4b5666;
  --nearly-black: #090909;

  /* These should be removed and replaced */

  --green: var(--green-700);
  --red: var(--red-600);
  --yellow: var(--yellow-700);
}