$colors: (
  primary: (
    "50": #E4F1FF,
    "100": #BFDCFF,
    "200": #95C7FF,
    "300": #6BB1FF,
    "400": #519FFF,
    "500": #458EFF,
    "600": #487FFF, // main theme color
    "700": #486CEA,
    "800": #4759D6,
    "900": #4536B6
  ),

  neutral: (
    "50": #F5F6FA,
    "100": #F3F4F6,
    "200": #EBECEF,
    "300": #D1D5DB,
    "400": #9CA3AF,
    "500": #6B7280,
    "600": #4B5563,
    "700": #374151,
    "800": #1F2937,
    "900": #111827
  ),

  danger: (
    "50": #FEF2F2,
    "100": #FEE2E2,
    "200": #FECACA,
    "300": #FCA5A5,
    "400": #F87171,
    "500": #EF4444,
    "600": #DC2626,
    "700": #B91C1C,
    "800": #991B1B,
    "900": #7F1D1D
  ),

  success: (
    "50": #F0FDF4,
    "100": #DCFCE7,
    "200": #BBF7D0,
    "300": #86EFAC,
    "400": #4ADE80,
    "500": #22C55E,
    "600": #16A34A,
    "700": #15803D,
    "800": #166534,
    "900": #14532D
  ),

  warning: (
    "50": #FEFCE8,  
    "100": #FEF9C3,
    "200": #FEF08A,
    "300": #FDE047,
    "400": #FACC15,
    "500": #EAB308,
    "600": #FF9F29,
    "700": #f39016,
    "800": #e58209,
    "900": #d77907
  ),

  info: (
    "50": #EFF6FF,
    "100": #DBEAFE,
    "200": #BFDBFE,
    "300": #93C5FD,
    "400": #60A5FA,
    "500": #3B82F6,
    "600": #2563EB,
    "700": #1D4ED8,
    "800": #1E40AF,
    "900": #1E3A8A
  ),

  dark: (
    "1": #1B2431,
    "2": #273142,
    "3": #323D4E,
  ),
  lilac: (
    "50": #f0e1ff,
    "100": #EBD7FF,
    "600": #8252E9,
    "700": #6f37e6,
    "800": #601eef,
  ),
  light: (
    "50": #F5F6FA,
    "100": #F3F4F6,
    "600": #E4F1FF,
    "700": #374151,
    "800": #1F2937,
  ),
);

$neutral-dark: (
  "50": #1B2431,
  "100": #273142,
  "200": #323D4E,

  "300": #4B5563,
  "400": #6B7280,
  "500": #9CA3AF,
  "600": #D1D5DB,
  "700": #EBECEF,
  "800": #F3F4F6,
  "900": #F5F6FA
);

$semantic-colors: (
  success: (
    "main": #45B369,
    "surface": #DAF0E1,
    "border": #B5E1C3,
    "hover": #009F5E,
    "pressed": #006038,
    "focus": #45b36926,
  ),

  info: (
    "main": #144BD6,
    "surface": #E7EEFC,
    "border": #AECAFC,
    "hover": #0A51CE,
    "pressed": #06307C,
    "focus": #144bd626
  ),

  warning: (
    "main": #FF9F29,
    "surface": #FFF9E2,
    "border": #FFEBA6,
    "hover": #D69705,
    "pressed": #C28800,
    "focus": #ffc02d26
  ),
  
  danger: (
    "main": #EF4A00,
    "surface": #FCDAE2,
    "border": #F9B5C6,
    "hover": #D53128,
    "pressed": #801D18,
    "focus": #ef477026
  )
);

$extra-colors: (
  "cyan": "#00B8F2",
  "indigo": "#7F27FF",
  "purple": "#8252E9",
  "red": "#E30A0A",
  "yellow": "#F4941E",
  "orange": "#F86624",
  "pink": "#DE3ACE",
);


$bg-light-colors: (
  "primary-light": "rgba(72, 127, 255, 0.15)",
  "yellow-light": "rgba(255, 159, 41, 0.15)",
  "purple-light": "rgba(130, 82, 233, 0.15)",
  "pink-light": "rgba(250, 54, 230, 0.15)",
);

$border-light-colors: (
  "primary-light-white": "rgba(72, 127, 255, 0.25)",
  "yellow-light-white": "rgba(255, 159, 41, 0.25)",
  "purple-light-white": "rgba(132, 90, 223, 0.25)",
  "pink-light-white": "rgba(250, 54, 230, 0.25)",
);


$spaces: (
  "2": #{rem(2px)},
  "4": #{rem(4px)},
  "6": #{rem(6px)},
  "8": #{rem(8px)},
  "9": #{rem(9px)},
  "10": #{rem(10px)},
  "11": #{rem(11px)},
  "12": #{rem(12px)},
  "13": #{rem(13px)},
  "16": #{rem(16px)},
  "20": #{rem(20px)},
  "24": #{rem(24px)},
  "28": #{rem(24px)},
  "32": #{rem(32px)},
  "36": #{rem(32px)},
  "40": #{rem(40px)}, 
  "44": #{rem(44px)}, 
  "48": #{rem(48px)},
  "50": #{rem(50px)},
  "56": #{rem(56px)},
  "60": #{rem(60px)},
  "64": #{rem(64px)},
  "72": #{rem(72px)},
  "80": #{rem(80px)},
  "90": #{rem(90px)},
  "110": #{rem(110px)},
  "120": #{rem(120px)},
  "144": #{rem(144px)},
  "160": #{rem(160px)},
  "170": #{rem(170px)},
  "190": #{rem(190px)},
  "200": #{rem(200px)},
  "240": #{rem(240px)},
  "440": #{rem(440px)},
);

$shadows: (
  "1": 0 4px 60px 0 rgba(#04060F, 0.8),
  "2": 0 4px 60px 0 rgba(#04060F, 0.5),
  "3": 0 20px 100px 0 rgba(#04060F, 0.8),
  "4": 4px 8px 24px 0 rgba(#B6B6B6, 0.20),
  "5": 4px 12px 32px 0 rgba(#00A99E, 0.10),
  "6": 4px 16px 32px 0 rgba(#00A99E, 0.10)
);

$font-sizes: (
  "2xxl": #{rem(32px)},
  "2xl": #{rem(28px)},
  "xxl": #{rem(24px)},
  "xl": #{rem(20px)},
  "lg": #{rem(18px)},
  "md": #{rem(16px)},
  "sm": #{rem(14px)},
  "xs": #{rem(12px)},
  "xxs": #{rem(10px)}
);

:root {
  // Font Family 
  --default-font: ;

  // font sizes
  --h1: clamp(2rem, 1.2rem + 4vw, 4.5rem); //72px > 32px
  --h2: clamp(1.75rem, 1.11rem + 3.2vw, 3.75rem); //60px > 28px
  --h3: clamp(1.5rem, 1.02rem + 2.4vw, 3rem); //48px > 24px
  --h4: clamp(1.375rem, 1.095rem + 1.4vw, 2.25rem); //36px > 22px 
  --h5: clamp(1.25rem, 1.05rem + 1vw, 1.875rem); //30px > 20px
  --h6: clamp(1.125rem, 1.005rem + 0.6vw, 1.5rem); //24px > 18px

  // spacing
  @each $property, $value in $spaces {
    --size-#{$property}: #{$value};
  }

  // Border Radius 
  @each $property, $value in $spaces {
    --rounded-#{$property}: #{$value};
  }

  // shadows
  @each $property, $value in $shadows {
    --shadow-#{$property}: #{$value};
  }  

  // font sizes
  @each $property, $value in $font-sizes {
    --font-#{$property}: #{$value};
  }  

  // colors
  @each $color, $shades in $colors {
    @each $shade, $value in $shades {
      --#{$color}-#{$shade}: #{$value};
    }
  }
  
  @each $color, $shades in $semantic-colors {
    @each $shade, $value in $shades {
      --#{$color}-#{$shade}: #{$value};
		}
	}

  // extra colors
  @each $property, $value in $extra-colors {
    --#{$property}: #{$value};
  }  
  
  // bg light colors
  @each $property, $value in $bg-light-colors {
    --#{$property}: #{$value};
  }  
  
  // border light colors
  @each $property, $value in $border-light-colors {
    --#{$property}: #{$value};
  }  
  
  // Design Token variables
  --base: #fff;
  --brand: var(--primary-600);
  --button-secondary: var(--primary-50);
  --black: var(--dark-2);
  --white: var(--base);
  --bg-color: var(--neutral-50);
  --text-primary-light: var(--neutral-900);
  --text-secondary-light: var(--neutral-600);
  --text-secondary-dark: var(--neutral-300);

  --input-form-light: var(--neutral-300);
  --input-form-dark: var(--neutral-500);
  --input-bg: var(--neutral-50);
  --input-stroke: var(--neutral-300);

  --border-color: #d1d5db80;
}

[data-theme="dark"] {
  // Design Token variables
  --button-secondary: var(--neutral-300);
  --black: var(--base);
  --white: var(--dark-2);
  --bg-color: var(--dark-1);
  --text-primary-light: var(--base);
  --text-secondary-light: #D1D5DB;
  --text-secondary-dark: var(--dark-2);

  --input-form-light: #6B7280;
  --input-form-dark: #D1D5DB;
  --input-bg: var(--dark-3);
  --input-stroke: #F3F4F6;

  --primary-50: #e4f1ff0f;
  --info-50: #EFF6FF0f;
  --warning-50: #FEFCE80f;
  --success-50: #F0FDF40f;
  --danger-50: #FEF2F20f;
  --lilac-100: #EBD7FF0f;
  --success-100: #DCFCE70f;
  --danger-100: rgba(239, 71, 112, 0.1490196078);

  --border-color: #d1d5db33;

  @each $shade, $value in $neutral-dark {
    --neutral-#{$shade}: #{$value};
  }
}