/* tokens/_colors.css
   Primitive color palette (the ONLY place raw hex values should live).
*/

:root {
  /* Gray scale (Tailwind-inspired). */
  --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-900: #111827;
  --gray-950: #0b1326;

  /* Cyan / highlight scale (brand accent). */
  --cyan-50:  #e0f7ff;
  --cyan-100: #b5ecfe;
  --cyan-200: #7ddcfc;
  --cyan-300: #44cbf9;
  --cyan-400: #1ed8ff;
  --cyan-500: #0ea5e9;
  --cyan-600: #0284c7;
  --cyan-700: #0369a1;
  --cyan-800: #075985;
  --cyan-900: #0c4a6e;

  /* Red / danger scale. */
  --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;
  --red-950: #8b0000;

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

  /* Blue / info scale. */
  --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;

  /* Yellow / warning scale. */
  --yellow-50:  #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;

  /* Pure colors. */
  --white: #ffffff;
  --black: #000000;
  --transparent: transparent;

  /* Viewer background presets (used by WebGL background modes). */
  --viewer-bg-grid: #f6f6f7;
  --viewer-bg-grid-dark: #14161a;
  /* Exactly STUDIO_PALETTES[*].surface in rendering/studio-backdrop.js. */
  --viewer-bg-studio: #ececec;
  --viewer-bg-studio-dark: #111111;
  /* Exactly BACKDROP_LOOKS[*].surface in rendering/backdrops/backdrop-looks.js. */
  --viewer-bg-atelier: #eeebe6;
  --viewer-bg-abyss: #d6eaea;
  --viewer-bg-aurora: #eceaec;
  --viewer-bg-nebula: #07080e;
  --viewer-bg-abyss-dark: #030e15;
  --viewer-bg-aurora-dark: #060a16;
}