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

/* Design-token CSS variables */
:root {
  --app-on-primary: #ffffff;

  --app-primary-900: #233876;
  --app-primary-800: #1e429f;
  --app-primary-700: #1a56db;
  --app-primary-600: #0346ff;
  --app-primary-500: #3f83f8;
  --app-primary-400: #76a9fa;
  --app-primary-300: #a4cafe;
  --app-primary-200: #c3ddfd;
  --app-primary-100: #e1effe;
  --app-primary-50: #ebf5ff;

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

  --app-blue-900: #233876;
  --app-blue-800: #1e429f;
  --app-blue-700: #1a56db;
  --app-blue-600: #0346ff;
  --app-blue-500: #3f83f8;
  --app-blue-400: #76a9fa;
  --app-blue-300: #a4cafe;
  --app-blue-200: #c3ddfd;
  --app-blue-100: #e1effe;
  --app-blue-50: #ebf5ff;

  --app-red-900: #771d1d;
  --app-red-800: #9b1c1c;
  --app-red-700: #c81e1e;
  --app-red-600: #e02424;
  --app-red-500: #f05252;
  --app-red-400: #f98080;
  --app-red-300: #f8b4b4;
  --app-red-200: #fbd5d5;
  --app-red-100: #fde8e8;
  --app-red-50: #fdf2f2;

  --app-green-900: #014737;
  --app-green-800: #03543f;
  --app-green-700: #046c4e;
  --app-green-600: #057a55;
  --app-green-500: #0e9f6e;
  --app-green-400: #31c48d;
  --app-green-300: #84e1bc;
  --app-green-200: #bcf0da;
  --app-green-100: #def7ec;
  --app-green-50: #f3faf7;

  --app-yellow-900: #633112;
  --app-yellow-800: #723b13;
  --app-yellow-700: #8e4b10;
  --app-yellow-600: #9f580a;
  --app-yellow-500: #c27803;
  --app-yellow-400: #e3a008;
  --app-yellow-300: #faca15;
  --app-yellow-200: #fce96a;
  --app-yellow-100: #fdf6b2;
  --app-yellow-50: #fdfdea;

  --app-success: #30cca4;
  --app-warning: #fbc94a;
  --app-error: #fb4a61;
  --app-info: #d4d4d4;
  --app-white: #ffffff;
  --app-black: #000000;
}

@theme inline {
  --color-*: initial;
  --color-transparent: transparent;

  --color-app-onPrimary: var(--app-on-primary);

  --color-app-primary-900: var(--app-primary-900);
  --color-app-primary-800: var(--app-primary-800);
  --color-app-primary-700: var(--app-primary-700);
  --color-app-primary-600: var(--app-primary-600);
  --color-app-primary-500: var(--app-primary-500);
  --color-app-primary-400: var(--app-primary-400);
  --color-app-primary-300: var(--app-primary-300);
  --color-app-primary-200: var(--app-primary-200);
  --color-app-primary-100: var(--app-primary-100);
  --color-app-primary-50: var(--app-primary-50);

  --color-app-gray-900: var(--app-gray-900);
  --color-app-gray-800: var(--app-gray-800);
  --color-app-gray-700: var(--app-gray-700);
  --color-app-gray-600: var(--app-gray-600);
  --color-app-gray-500: var(--app-gray-500);
  --color-app-gray-400: var(--app-gray-400);
  --color-app-gray-300: var(--app-gray-300);
  --color-app-gray-200: var(--app-gray-200);
  --color-app-gray-100: var(--app-gray-100);
  --color-app-gray-50: var(--app-gray-50);

  --color-app-blue-900: var(--app-blue-900);
  --color-app-blue-800: var(--app-blue-800);
  --color-app-blue-700: var(--app-blue-700);
  --color-app-blue-600: var(--app-blue-600);
  --color-app-blue-500: var(--app-blue-500);
  --color-app-blue-400: var(--app-blue-400);
  --color-app-blue-300: var(--app-blue-300);
  --color-app-blue-200: var(--app-blue-200);
  --color-app-blue-100: var(--app-blue-100);
  --color-app-blue-50: var(--app-blue-50);

  --color-app-red-900: var(--app-red-900);
  --color-app-red-800: var(--app-red-800);
  --color-app-red-700: var(--app-red-700);
  --color-app-red-600: var(--app-red-600);
  --color-app-red-500: var(--app-red-500);
  --color-app-red-400: var(--app-red-400);
  --color-app-red-300: var(--app-red-300);
  --color-app-red-200: var(--app-red-200);
  --color-app-red-100: var(--app-red-100);
  --color-app-red-50: var(--app-red-50);

  --color-app-green-900: var(--app-green-900);
  --color-app-green-800: var(--app-green-800);
  --color-app-green-700: var(--app-green-700);
  --color-app-green-600: var(--app-green-600);
  --color-app-green-500: var(--app-green-500);
  --color-app-green-400: var(--app-green-400);
  --color-app-green-300: var(--app-green-300);
  --color-app-green-200: var(--app-green-200);
  --color-app-green-100: var(--app-green-100);
  --color-app-green-50: var(--app-green-50);

  --color-app-yellow-900: var(--app-yellow-900);
  --color-app-yellow-800: var(--app-yellow-800);
  --color-app-yellow-700: var(--app-yellow-700);
  --color-app-yellow-600: var(--app-yellow-600);
  --color-app-yellow-500: var(--app-yellow-500);
  --color-app-yellow-400: var(--app-yellow-400);
  --color-app-yellow-300: var(--app-yellow-300);
  --color-app-yellow-200: var(--app-yellow-200);
  --color-app-yellow-100: var(--app-yellow-100);
  --color-app-yellow-50: var(--app-yellow-50);

  --color-app-light-surface-main: var(--app-gray-100);
  --color-app-light-surface1: var(--app-white);
  --color-app-light-surface2: var(--app-gray-50);
  --color-app-light-surface3: var(--app-gray-100);
  --color-app-light-surface4: var(--app-gray-200);

  --color-app-dark-surface-main: var(--app-gray-900);
  --color-app-dark-surface1: var(--app-black);
  --color-app-dark-surface2: var(--app-gray-900);
  --color-app-dark-surface3: var(--app-gray-800);
  --color-app-dark-surface4: var(--app-gray-700);

  --color-app-success: var(--app-success);
  --color-app-warning: var(--app-warning);
  --color-app-error: var(--app-error);
  --color-app-info: var(--app-info);
  --color-app-white: var(--app-white);
  --color-app-black: var(--app-black);
}

@theme {
  --font-header: "Inter";
  --font-body: "Inter";

  --text-xxs: 0.625rem;

  --breakpoint-smb: 23.75rem;
  --breakpoint-xs: 27.5rem;
  --breakpoint-mb: 35.625rem;
  --breakpoint-tab: 52.5rem;

  --shadow-sm: 0px 14px 28px rgba(46, 91, 255, 0.06);
  --shadow-inner: inset 0px 4px 28px rgba(46, 91, 255, 0.06);
  --shadow-dark: 0 20px 28px rgba(0, 0, 0, 0.16);
  --shadow-dark2: 5px 5px 10px #212121, -5px -5px 10px rgb(55 56 60 / 25%);
}