/* Figma color system.
   Source node: 43:1972
*/

:root {
  /* Core brand colors */
  --ds-color-primary: #5994f0;
  --ds-color-secondary: #0e0e10;
  --ds-color-neutral: #0e0e10;

  /* Primary palette */
  --ds-color-primary-950: #090f18;
  --ds-color-primary-900: #121e30;
  --ds-color-primary-800: #243b60;
  --ds-color-primary-700: #355990;
  --ds-color-primary-600: #4776c0;
  --ds-color-primary-500: #5994f0;
  --ds-color-primary-400: #7aa9f3;
  --ds-color-primary-300: #9bbff6;
  --ds-color-primary-200: #bdd4f9;
  --ds-color-primary-100: #deeafc;
  --ds-color-primary-50: #eff5fe;

  /* Secondary gray palette */
  --ds-color-secondary-950: #0e0e10;
  --ds-color-secondary-900: #1c1d1f;
  --ds-color-secondary-800: #383a3f;
  --ds-color-secondary-700: #54575e;
  --ds-color-secondary-600: #70747e;
  --ds-color-secondary-500: #8c919d;
  --ds-color-secondary-400: #a3a7b1;
  --ds-color-secondary-300: #babdc4;
  --ds-color-secondary-200: #d1d3d8;
  --ds-color-secondary-150: #e8e9eb;
  --ds-color-secondary-100: #f4f4f6;

  /* Neutral palette */
  --ds-color-neutral-950: #0e0e10;
  --ds-color-neutral-900: #181819;
  --ds-color-neutral-800: #313131;
  --ds-color-neutral-700: #616262;
  --ds-color-neutral-600: #929294;
  --ds-color-neutral-500: #c2c3c5;
  --ds-color-neutral-400: #f3f4f6;
  --ds-color-neutral-300: #f5f6f8;
  --ds-color-neutral-200: #f8f8fa;
  --ds-color-neutral-150: #fafbfb;
  --ds-color-neutral-100: #fdfdfd;
  --ds-color-neutral-50: #fefeff;

  /* Text style roles from the color-system cards */
  --ds-color-style-headline: var(--ds-color-secondary-950);
  --ds-color-style-body: var(--ds-color-secondary-700);
  --ds-color-style-label: var(--ds-color-secondary-500);

  /* Figma variable aliases used by the landing page */
  --primary-light-blue-50: var(--ds-color-primary-50);
  --primary-light-blue-100: var(--ds-color-primary-50);
  --primary-light-blue-150: var(--ds-color-primary-100);
  --primary-light-blue-200: var(--ds-color-primary-200);
  --primary-light-blue-300: var(--ds-color-primary-300);
  --primary-light-blue-400: var(--ds-color-primary-400);
  --primary-light-blue-500: var(--ds-color-primary-500);
  --primary-light-blue-600: var(--ds-color-primary-600);
  --primary-light-blue-700: var(--ds-color-primary-700);
  --primary-light-blue-800: var(--ds-color-primary-800);
  --primary-light-blue-900: var(--ds-color-primary-900);
  --primary-light-blue-950: var(--ds-color-primary-950);

  --primary-blue-100: #ede7fe;
  --primary-blue-300: #916ff8;
  --primary-blue-500: #470ff4;

  --secondary-gray-100: var(--ds-color-secondary-100);
  --secondary-gray-150: var(--ds-color-secondary-150);
  --secondary-gray-200: var(--ds-color-secondary-200);
  --secondary-gray-300: var(--ds-color-secondary-300);
  --secondary-gray-400: var(--ds-color-secondary-400);
  --secondary-gray-500: var(--ds-color-secondary-500);
  --secondary-gray-600: var(--ds-color-secondary-700);
  --secondary-gray-700: var(--ds-color-secondary-600);
  --secondary-gray-800: var(--ds-color-secondary-800);
  --secondary-gray-900: var(--ds-color-secondary-900);
  --secondary-gray-950: var(--ds-color-secondary-950);

  --secondary-neutral-50: var(--ds-color-neutral-50);
  --secondary-neutral-100: var(--ds-color-neutral-50);
  --secondary-neutral-150: var(--ds-color-neutral-150);
  --secondary-neutral-200: var(--ds-color-neutral-200);
  --secondary-neutral-300: var(--ds-color-neutral-200);
  --secondary-neutral-400: var(--ds-color-neutral-300);
  --secondary-neutral-500: var(--ds-color-neutral-400);
  --secondary-neutral-600: var(--ds-color-neutral-500);
  --secondary-neutral-700: var(--ds-color-neutral-600);
  --secondary-neutral-800: var(--ds-color-neutral-700);
  --secondary-neutral-950: var(--ds-color-neutral-900);

  /* Project compatibility aliases */
  --lb-50: var(--ds-color-primary-50);
  --lb-100: var(--ds-color-primary-50);
  --lb-150: var(--ds-color-primary-100);
  --lb-200: var(--ds-color-primary-200);
  --lb-300: var(--ds-color-primary-300);
  --lb-400: var(--ds-color-primary-400);
  --lb-500: var(--ds-color-primary-500);
  --lb-600: var(--ds-color-primary-600);
  --lb-700: var(--ds-color-primary-700);
  --lb-800: var(--ds-color-primary-800);
  --lb-900: var(--ds-color-primary-900);
  --lb-950: var(--ds-color-primary-950);

  --gray-50: var(--ds-color-secondary-100);
  --gray-100: var(--ds-color-secondary-100);
  --gray-150: var(--ds-color-secondary-150);
  --gray-200: var(--ds-color-secondary-200);
  --gray-300: var(--ds-color-secondary-300);
  --gray-400: var(--ds-color-secondary-400);
  --gray-500: var(--ds-color-secondary-500);
  --gray-600: var(--ds-color-secondary-700);
  --gray-700: var(--ds-color-secondary-600);
  --gray-800: var(--ds-color-secondary-800);
  --gray-900: var(--ds-color-secondary-900);
  --gray-950: var(--ds-color-secondary-950);

  --neutral-50: var(--ds-color-neutral-50);
  --neutral-100: var(--ds-color-neutral-50);
  --neutral-150: var(--ds-color-neutral-150);
  --neutral-200: var(--ds-color-neutral-200);
  --neutral-300: var(--ds-color-neutral-200);
  --neutral-400: var(--ds-color-neutral-300);
  --neutral-500: var(--ds-color-neutral-400);

  --text: var(--ds-color-style-headline);
  --text-soft: var(--ds-color-style-body);
  --text-muted: var(--ds-color-style-label);
}

.ds-text-primary { color: var(--ds-color-primary); }
.ds-bg-primary { background-color: var(--ds-color-primary); }
.ds-border-primary { border-color: var(--ds-color-primary); }

.ds-text-secondary { color: var(--ds-color-secondary); }
.ds-bg-secondary { background-color: var(--ds-color-secondary); }
.ds-border-secondary { border-color: var(--ds-color-secondary); }

.ds-text-neutral { color: var(--ds-color-neutral); }
.ds-bg-neutral { background-color: var(--ds-color-neutral); }
.ds-border-neutral { border-color: var(--ds-color-neutral); }

.ds-style-headline { color: var(--ds-color-style-headline); }
.ds-style-body { color: var(--ds-color-style-body); }
.ds-style-label { color: var(--ds-color-style-label); }