@import './montserrat.css';
@import './base-neue/base-neue.css';

@layer base {
  :root {
    --st-brand-primary-100: #efebfc;
    --st-brand-primary-200: #e0d9fb;
    --st-brand-primary-300: #d7cff8;
    --st-brand-primary-400: #ad8fff;
    --st-brand-primary-500: #6c3cad;
    --st-brand-primary-600: #55209d;
    --st-brand-primary-700: #3f136d;
    --st-brand-primary-800: #2e0850;
    --st-brand-primary-900: #270644;
    --st-brand-primary-950: #1d0533;

    --st-brand-secondary-100: #fffacd;
    --st-brand-secondary-200: #cdf6a0;
    --st-brand-secondary-300: #acee68;
    --st-brand-secondary-400: #80dd24;
    --st-brand-secondary-500: #6ec61c;
    --st-brand-secondary-600: #5aa816;
    --st-brand-secondary-700: #3f7d10;
    --st-brand-secondary-800: #2e5c0c;
    --st-brand-secondary-900: #1f3d08;
    --st-brand-secondary-950: #142705;

    --st-neutral-color-0: #ffffff;
    --st-neutral-color-50: #fafafa;
    --st-neutral-color-100: #f5f5f5;
    --st-neutral-color-150: #ededed;
    --st-neutral-color-200: #e5e5e5;
    --st-neutral-color-250: #dcdcdc;
    --st-neutral-color-300: #d4d4d4;
    --st-neutral-color-350: #bcbcbc;
    --st-neutral-color-400: #a3a3a3;
    --st-neutral-color-450: #8b8b8b;
    --st-neutral-color-500: #737373;
    --st-neutral-color-550: #626262;
    --st-neutral-color-600: #525252;
    --st-neutral-color-650: #494949;
    --st-neutral-color-700: #404040;
    --st-neutral-color-750: #333333;
    --st-neutral-color-800: #262626;
    --st-neutral-color-850: #1e1e1e;
    --st-neutral-color-900: #171717;
    --st-neutral-color-950: #0a0a0a;

    --st-neutral-tint-color-0: #ffffff;
    --st-neutral-tint-color-50: #fcf7ff;
    --st-neutral-tint-color-100: #f7f2ff;
    --st-neutral-tint-color-150: #f0e9ff;
    --st-neutral-tint-color-200: #e8e1f9;
    --st-neutral-tint-color-250: #dfd7f3;
    --st-neutral-tint-color-300: #d8cfec;
    --st-neutral-tint-color-350: #c0b6d9;
    --st-neutral-tint-color-400: #a89cc3;
    --st-neutral-tint-color-450: #9083ac;
    --st-neutral-tint-color-500: #786b94;
    --st-neutral-tint-color-550: #675a81;
    --st-neutral-tint-color-600: #574a6f;
    --st-neutral-tint-color-650: #4e4265;
    --st-neutral-tint-color-700: #44395a;
    --st-neutral-tint-color-750: #372d4a;
    --st-neutral-tint-color-800: #29213a;
    --st-neutral-tint-color-850: #21192f;
    --st-neutral-tint-color-900: #1a1326;
    --st-neutral-tint-color-950: #0c0714;

    --st-crema-color-100: #f5f0de;
    --st-crema-color-200: #eee4df;
    --st-crema-color-300: #e7d8e0;
    --st-crema-color-400: #e0cce0;
    --st-crema-color-500: #d9c0e1;
    --st-crema-color-600: #d2b3df;
    --st-crema-color-700: #cba7dc;
    --st-crema-color-800: #cba7dc;
    --st-crema-color-900: #c39bd8;
    --st-crema-color-950: #bc8fd5;

    --st-info-color-100: #cffafe;
    --st-info-color-200: #a5f3fc;
    --st-info-color-300: #67e8f9;
    --st-info-color-400: #22d3ee;
    --st-info-color-500: #06b6d4;
    --st-info-color-600: #0891b2;
    --st-info-color-700: #0e7490;
    --st-info-color-800: #155e75;
    --st-info-color-900: #164e63;
    --st-info-color-950: #083344;

    --st-system-color-100: #d6e5ff;
    --st-system-color-200: #a3c5ff;
    --st-system-color-300: #70a5ff;
    --st-system-color-400: #3d85ff;
    --st-system-color-500: #0a65ff;
    --st-system-color-600: #004dcf;
    --st-system-color-700: #003da3;
    --st-system-color-800: #002a70;
    --st-system-color-900: #001b47;
    --st-system-color-950: #000f27;

    --st-positive-color-100: #a7f3cb;
    --st-positive-color-200: #6de8b0;
    --st-positive-color-300: #3fdd94;
    --st-positive-color-400: #1fcc77;
    --st-positive-color-500: #0cab58;
    --st-positive-color-600: #0a8a49;
    --st-positive-color-700: #086a39;
    --st-positive-color-800: #064f2b;
    --st-positive-color-900: #04351d;
    --st-positive-color-950: #022113;

    --st-attention-color-100: #fff6bf;
    --st-attention-color-200: #ffea73;
    --st-attention-color-300: #ffda30;
    --st-attention-color-400: #fea900;
    --st-attention-color-500: #df7000;
    --st-attention-color-600: #b65600;
    --st-attention-color-700: #8a4100;
    --st-attention-color-800: #6a3000;
    --st-attention-color-900: #4a2100;
    --st-attention-color-950: #2f1500;

    --st-negative-color-100: #ffcbc9;
    --st-negative-color-200: #ff9e9b;
    --st-negative-color-300: #ff7f7a;
    --st-negative-color-400: #fa746f;
    --st-negative-color-500: #f1433c;
    --st-negative-color-600: #d53630;
    --st-negative-color-700: #ab2b26;
    --st-negative-color-800: #82201c;
    --st-negative-color-900: #5a1613;
    --st-negative-color-950: #3a0e0c;

    --st-shadow-scale-100: rgba(54, 0, 114, 0.04);
    --st-shadow-scale-200: rgba(54, 0, 114, 0.08);
    --st-shadow-scale-300: rgba(54, 0, 114, 0.16);
    --st-shadow-scale-400: rgba(54, 0, 114, 0.24);
    --st-shadow-scale-500: rgba(54, 0, 114, 0.32);
    --st-shadow-scale-600: rgba(54, 0, 114, 0.4);
    --st-shadow-scale-700: rgba(54, 0, 114, 0.48);
    --st-shadow-scale-800: rgba(54, 0, 114, 0.56);
    --st-shadow-scale-900: rgba(54, 0, 114, 0.64);
    --st-shadow-scale-950: rgba(60, 0, 120, 0.72);

    --st-light-scale-100: rgba(180, 124, 255, 0.04);
    --st-light-scale-200: rgba(180, 124, 255, 0.08);
    --st-light-scale-300: rgba(180, 124, 255, 0.16);
    --st-light-scale-400: rgba(180, 124, 255, 0.24);
    --st-light-scale-500: rgba(180, 124, 255, 0.32);
    --st-light-scale-600: rgba(180, 124, 255, 0.4);
    --st-light-scale-700: rgba(180, 124, 255, 0.48);
    --st-light-scale-800: rgba(180, 124, 255, 0.56);
    --st-light-scale-900: rgba(180, 124, 255, 0.64);
    --st-light-scale-950: rgba(180, 124, 255, 0.72);

    --st-bright-scale-100: rgba(255, 255, 255, 0.04);
    --st-bright-scale-200: rgba(255, 255, 255, 0.08);
    --st-bright-scale-300: rgba(255, 255, 255, 0.16);
    --st-bright-scale-400: rgba(255, 255, 255, 0.24);
    --st-bright-scale-500: rgba(255, 255, 255, 0.32);
    --st-bright-scale-600: rgba(255, 255, 255, 0.4);
    --st-bright-scale-700: rgba(255, 255, 255, 0.48);
    --st-bright-scale-800: rgba(255, 255, 255, 0.56);
    --st-bright-scale-900: rgba(255, 255, 255, 0.64);
    --st-bright-scale-950: rgba(255, 255, 255, 0.72);

    --st-din-scale-100: rgba(0, 0, 0, 0.04);
    --st-din-scale-200: rgba(0, 0, 0, 0.08);
    --st-din-scale-300: rgba(0, 0, 0, 0.16);
    --st-din-scale-400: rgba(0, 0, 0, 0.24);
    --st-din-scale-500: rgba(0, 0, 0, 0.32);
    --st-din-scale-600: rgba(0, 0, 0, 0.4);
    --st-din-scale-700: rgba(0, 0, 0, 0.48);
    --st-din-scale-800: rgba(0, 0, 0, 0.56);
    --st-din-scale-900: rgba(0, 0, 0, 0.64);
    --st-din-scale-950: rgba(0, 0, 0, 0.72);

    --st-neutral-tint-bright-scale-100: rgba(216, 207, 236, 0.04);
    --st-neutral-tint-bright-scale-200: rgba(216, 207, 236, 0.08);
    --st-neutral-tint-bright-scale-300: rgba(216, 207, 236, 0.16);
    --st-neutral-tint-bright-scale-400: rgba(216, 207, 236, 0.24);
    --st-neutral-tint-bright-scale-500: rgba(216, 207, 236, 0.32);
    --st-neutral-tint-bright-scale-600: rgba(216, 207, 236, 0.4);
    --st-neutral-tint-bright-scale-700: rgba(216, 207, 236, 0.48);
    --st-neutral-tint-bright-scale-800: rgba(216, 207, 236, 0.56);
    --st-neutral-tint-bright-scale-900: rgba(216, 207, 236, 0.64);
    --st-neutral-tint-bright-scale-950: rgba(216, 207, 236, 0.72);

    --st-neutral-tint-din-scale-100: rgba(12, 7, 20, 0.04);
    --st-neutral-tint-din-scale-200: rgba(12, 7, 20, 0.08);
    --st-neutral-tint-din-scale-300: rgba(12, 7, 20, 0.16);
    --st-neutral-tint-din-scale-400: rgba(12, 7, 20, 0.24);
    --st-neutral-tint-din-scale-500: rgba(12, 7, 20, 0.32);
    --st-neutral-tint-din-scale-600: rgba(12, 7, 20, 0.4);
    --st-neutral-tint-din-scale-700: rgba(12, 7, 20, 0.48);
    --st-neutral-tint-din-scale-800: rgba(12, 7, 20, 0.56);
    --st-neutral-tint-din-scale-900: rgba(12, 7, 20, 0.64);
    --st-neutral-tint-din-scale-950: rgba(12, 7, 20, 0.72);

    --st-blue-color-100: #dbeafe;
    --st-blue-color-200: #bfdbfe;
    --st-blue-color-300: #93c5fd;
    --st-blue-color-400: #60a5fa;
    --st-blue-color-500: #3b82f6;
    --st-blue-color-600: #2563eb;
    --st-blue-color-700: #1d4ed8;
    --st-blue-color-800: #1e40af;
    --st-blue-color-900: #1e3a8a;
    --st-blue-color-950: #172554;

    --st-ocean-color-100: #cffafe;
    --st-ocean-color-200: #a5f3fc;
    --st-ocean-color-300: #67e8f9;
    --st-ocean-color-400: #22d3ee;
    --st-ocean-color-500: #06b6d4;
    --st-ocean-color-600: #0891b2;
    --st-ocean-color-700: #0e7490;
    --st-ocean-color-800: #155e75;
    --st-ocean-color-900: #164e63;
    --st-ocean-color-950: #083344;

    --st-green-color-100: #dcfce7;
    --st-green-color-200: #bbf7d0;
    --st-green-color-300: #86efac;
    --st-green-color-400: #4ade80;
    --st-green-color-500: #22c55e;
    --st-green-color-600: #16a34a;
    --st-green-color-700: #15803d;
    --st-green-color-800: #166534;
    --st-green-color-900: #14532d;
    --st-green-color-950: #052e16;

    --st-yellow-color-100: #fef9c3;
    --st-yellow-color-200: #fef08a;
    --st-yellow-color-300: #fde047;
    --st-yellow-color-400: #facc15;
    --st-yellow-color-500: #eab308;
    --st-yellow-color-600: #ca8a04;
    --st-yellow-color-700: #a16207;
    --st-yellow-color-800: #854d0e;
    --st-yellow-color-900: #713f12;
    --st-yellow-color-950: #422006;

    --st-orange-color-100: #ffedd5;
    --st-orange-color-200: #fed7aa;
    --st-orange-color-300: #fdba74;
    --st-orange-color-400: #fb923c;
    --st-orange-color-500: #f97316;
    --st-orange-color-600: #ea580c;
    --st-orange-color-700: #c2410c;
    --st-orange-color-800: #9a3412;
    --st-orange-color-900: #7c2d12;
    --st-orange-color-950: #431407;

    --st-red-color-100: #fee2e2;
    --st-red-color-200: #fecaca;
    --st-red-color-300: #fca5a5;
    --st-red-color-400: #f87171;
    --st-red-color-500: #ef4444;
    --st-red-color-600: #dc2626;
    --st-red-color-700: #b91c1c;
    --st-red-color-800: #991b1b;
    --st-red-color-900: #7f1d1d;
    --st-red-color-950: #450a0a;

    --st-pink-color-100: #fce7f3;
    --st-pink-color-200: #fbcfe8;
    --st-pink-color-300: #f9a8d4;
    --st-pink-color-400: #f472b6;
    --st-pink-color-500: #ec4899;
    --st-pink-color-600: #db2777;
    --st-pink-color-700: #be185d;
    --st-pink-color-800: #9d174d;
    --st-pink-color-900: #831843;
    --st-pink-color-950: #500724;

    --st-purple-color-100: #e4d1f7;
    --st-purple-color-200: #c39de9;
    --st-purple-color-300: #a16dda;
    --st-purple-color-400: #8548c7;
    --st-purple-color-500: #6a2bb0;
    --st-purple-color-600: #551d91;
    --st-purple-color-700: #431773;
    --st-purple-color-800: #321158;
    --st-purple-color-900: #240c40;
    --st-purple-color-950: #170729;
  }

  :root,
  [data-theme='light'] {
    color-scheme: light;

    --st-color-brand: var(--st-brand-primary-700);
    --st-color-primary: var(--st-purple-color-500);
    --st-color-secondary: var(--st-brand-secondary-400);
    --st-color-info: var(--st-info-color-500);
    --st-color-system: var(--st-system-color-600);
    --st-color-warning: var(--st-attention-color-300);
    --st-color-positive: var(--st-positive-color-500);
    --st-color-negative: var(--st-negative-color-500);

    --st-color-surface-0: var(--st-neutral-tint-color-0);
    --st-color-surface-1: var(--st-neutral-tint-color-100);
    --st-color-surface-2: var(--st-neutral-tint-color-150);
    --st-color-surface-3: var(--st-neutral-tint-color-200);
    --st-color-surface-4: var(--st-neutral-tint-color-250);

    --st-color-surface-primary: var(--st-brand-primary-400);
    --st-color-surface-secondary: var(--st-brand-secondary-300);
    --st-color-surface-info: var(--st-info-color-100);
    --st-color-surface-system: var(--st-system-color-300);
    --st-color-surface-warning: var(--st-attention-color-300);
    --st-color-surface-positive: var(--st-positive-color-300);
    --st-color-surface-negative: var(--st-negative-color-400);

    --st-color-surface-shadow-0: var(--st-shadow-scale-500);
    --st-color-surface-shadow-1: var(--st-shadow-scale-600);
    --st-color-surface-shadow-2: var(--st-shadow-scale-700);
    --st-color-surface-shadow-3: var(--st-shadow-scale-800);

    --st-color-content-default: var(--st-neutral-tint-color-900);
    --st-color-content-disable: var(--st-neutral-tint-color-650);
    --st-color-content-ghost: var(--st-neutral-tint-color-550);
    --st-color-content-bright: var(--st-neutral-color-0);
    --st-color-content-din: var(--st-neutral-color-950);

    --st-color-content-primary: var(--st-brand-primary-950);
    --st-color-content-secondary: var(--st-brand-secondary-800);
    --st-color-content-info: var(--st-info-color-950);
    --st-color-content-system: var(--st-system-color-800);
    --st-color-content-warning: var(--st-attention-color-800);
    --st-color-content-positive: var(--st-positive-color-800);
    --st-color-content-negative: var(--st-negative-color-900);

    --st-color-border-1: var(--st-neutral-tint-din-scale-300);
    --st-color-border-2: var(--st-neutral-tint-din-scale-400);
    --st-color-border-3: var(--st-neutral-tint-din-scale-500);

    --st-color-focus: var(--st-purple-color-400);
    --st-color-pressed: var(--st-shadow-scale-400);
    --st-color-shadow-pressed: var(--st-shadow-scale-300);
    --st-color-hover: var(--st-shadow-scale-500);
    --st-color-shadow-hover: var(--st-shadow-scale-300);

    --st-color-shadow-0: var(--st-shadow-scale-100);
    --st-color-shadow-1: var(--st-shadow-scale-200);
    --st-color-shadow-2: var(--st-shadow-scale-300);
    --st-color-shadow-3: var(--st-shadow-scale-400);

    --st-color-light-0: var(--st-light-scale-700);
    --st-color-light-1: var(--st-light-scale-800);
    --st-color-light-2: var(--st-light-scale-900);
    --st-color-light-3: var(--st-light-scale-950);
  }

  [data-theme='dark'] {
    color-scheme: dark;

    --st-color-brand: var(--st-brand-primary-700);
    --st-color-primary: var(--st-purple-color-500);
    --st-color-secondary: var(--st-brand-secondary-400);
    --st-color-info: var(--st-info-color-500);
    --st-color-system: var(--st-system-color-600);
    --st-color-warning: var(--st-attention-color-300);
    --st-color-positive: var(--st-positive-color-500);
    --st-color-negative: var(--st-negative-color-500);

    --st-color-surface-0: var(--st-neutral-tint-color-750);
    --st-color-surface-1: var(--st-neutral-tint-color-800);
    --st-color-surface-2: var(--st-neutral-tint-color-850);
    --st-color-surface-3: var(--st-neutral-tint-color-900);
    --st-color-surface-4: var(--st-neutral-tint-color-950);

    --st-color-surface-shadow-0: var(--st-shadow-scale-500);
    --st-color-surface-shadow-1: var(--st-shadow-scale-600);
    --st-color-surface-shadow-2: var(--st-shadow-scale-700);
    --st-color-surface-shadow-3: var(--st-shadow-scale-800);

    --st-color-surface-primary: var(--st-brand-primary-700);
    --st-color-surface-secondary: var(--st-brand-secondary-800);
    --st-color-surface-info: var(--st-info-color-950);
    --st-color-surface-system: var(--st-system-color-900);
    --st-color-surface-warning: var(--st-attention-color-800);
    --st-color-surface-positive: var(--st-positive-color-800);
    --st-color-surface-negative: var(--st-negative-color-900);

    --st-color-content-default: var(--st-neutral-tint-color-100);
    --st-color-content-disable: var(--st-neutral-tint-color-300);
    --st-color-content-ghost: var(--st-neutral-tint-color-400);
    --st-color-content-bright: var(--st-neutral-color-0);
    --st-color-content-din: var(--st-neutral-color-950);

    --st-color-content-primary: var(--st-brand-primary-100);
    --st-color-content-secondary: var(--st-brand-secondary-300);
    --st-color-content-info: var(--st-info-color-200);
    --st-color-content-system: var(--st-system-color-300);
    --st-color-content-warning: var(--st-attention-color-300);
    --st-color-content-positive: var(--st-positive-color-400);
    --st-color-content-negative: var(--st-negative-color-400);

    --st-color-border-1: var(--st-neutral-tint-bright-scale-400);
    --st-color-border-2: var(--st-neutral-tint-bright-scale-500);
    --st-color-border-3: var(--st-neutral-tint-bright-scale-600);

    --st-color-focus: var(--st-purple-color-400);
    --st-color-pressed: var(--st-light-scale-300);
    --st-color-shadow-pressed: var(--st-light-scale-700);
    --st-color-hover: var(--st-light-scale-200);
    --st-color-shadow-hover: var(--st-light-scale-700);

    --st-color-shadow-0: var(--st-din-scale-300);
    --st-color-shadow-1: var(--st-din-scale-400);
    --st-color-shadow-2: var(--st-din-scale-500);
    --st-color-shadow-3: var(--st-din-scale-600);

    --st-color-light-0: var(--st-light-scale-700);
    --st-color-light-1: var(--st-light-scale-800);
    --st-color-light-2: var(--st-light-scale-900);
    --st-color-light-3: var(--st-light-scale-950);
  }
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--st-color-surface-4);
}

*::-webkit-scrollbar-thumb {
  background: var(--st-color-surface-1);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--st-color-surface-0);
}