@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-dm: var(--font-dm-sans);
  --font-poppins: "Poppins", sans-serif;
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1320px;
  --breakpoint-3xl: 1600px;
  --breakpoint-4xl: 1850px;

  --radius-primary: 20px;

  --shadow-3xl: 14px 17px 40px 4px rgba(0, 0, 0, 0.1);
  --shadow-inset: inset 0px 18px 22px rgba(0, 0, 0, 0.1);
  --shadow-darkinset: 0px 4px 4px inset rgba(0, 0, 0, 0.1);

  --color-lightPrimary: #F4F7FE;
  --color-blueSecondary: #4318FF;
  --color-brandLinear: #868CFF;

  --color-gray-50: #f8f9fa;
  --color-gray-100: #edf2f7;
  --color-gray-200: #e9ecef;
  --color-gray-300: #cbd5e0;
  --color-gray-400: #a0aec0;
  --color-gray-500: #adb5bd;
  --color-gray-600: #a3aed0;
  --color-gray-700: #707eae;
  --color-gray-800: #252f40;
  --color-gray-900: #1b2559;

  --color-navy-50: #d0dcfb;
  --color-navy-100: #aac0fe;
  --color-navy-200: #a3b9f8;
  --color-navy-300: #728fea;
  --color-navy-400: #3652ba;
  --color-navy-500: #1b3bbb;
  --color-navy-600: #24388a;
  --color-navy-700: #1B254B;
  --color-navy-800: #111c44;
  --color-navy-900: #0b1437;

  --color-brand-50: #E9E3FF;
  --color-brand-100: #C0B8FE;
  --color-brand-200: #A195FD;
  --color-brand-300: #8171FC;
  --color-brand-400: #7551FF;
  --color-brand-500: #422AFB;
  --color-brand-600: #3311DB;
  --color-brand-700: #2111A5;
  --color-brand-800: #190793;
  --color-brand-900: #11047A;

  --color-red-50: #ee5d501a;
  --color-red-500: #f53939;
  --color-red-600: #ea0606;

  --color-green-50: #05cd991a;
  --color-green-500: #22c55e;
  --color-green-600: #17ad37;

  --color-cyan-400: #21d4fd;
  --color-cyan-500: #17c1e8;

  --color-blue-600: #2152ff;
  --color-blue-900: #00007d;

  --color-pink-500: #ff0080;

  --color-shadow-500: rgba(112, 144, 176, 0.08);
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

.dark {
  --background: #0b1437;
  --foreground: #ededed;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-dm);
}

option {
  color: black;
}