// Screen Breakpoints //

$screen-sm: 640px !default;
$screen-md: 768px !default;
$screen-lg: 1024px !default;
$screen-xl: 1280px !default;

$screen-breakpoints: (
  sm: $screen-sm,
  md: $screen-md,
  lg: $screen-lg,
  xl: $screen-xl
) !default;

// Colors //

$color-white: #ffffff !default;
$color-black: #000000 !default;

$color-gray-100: #f7fafc !default;
$color-gray-200: #edf2f7 !default;
$color-gray-300: #e2e8f0 !default;
$color-gray-400: #cbd5e0 !default;
$color-gray-500: #a0aec0 !default;
$color-gray-600: #718096 !default;
$color-gray-700: #4a5568 !default;
$color-gray-800: #2d3748 !default;
$color-gray-900: #1a202c !default;

$color-red-100: #fff5f5 !default;
$color-red-200: #fed7d7 !default;
$color-red-300: #feb2b2 !default;
$color-red-400: #fc8181 !default;
$color-red-500: #f56565 !default;
$color-red-600: #e53e3e !default;
$color-red-700: #c53030 !default;
$color-red-800: #9b2c2c !default;
$color-red-900: #742a2a !default;

$color-green-100: #f0fff4 !default;
$color-green-200: #c6f6d5 !default;
$color-green-300: #9ae6b4 !default;
$color-green-400: #68d391 !default;
$color-green-500: #48bb78 !default;
$color-green-600: #38a169 !default;
$color-green-700: #2f855a !default;
$color-green-800: #276749 !default;
$color-green-900: #22543d !default;

$color-blue-100: #ebf8ff !default;
$color-blue-200: #bee3f8 !default;
$color-blue-300: #90cdf4 !default;
$color-blue-400: #63b3ed !default;
$color-blue-500: #4299e1 !default;
$color-blue-600: #3182ce !default;
$color-blue-700: #2b6cb0 !default;
$color-blue-800: #2c5282 !default;
$color-blue-900: #2a4365 !default;

$color-orange-100: #fffaf0 !default;
$color-orange-200: #feebc8 !default;
$color-orange-300: #fbd38d !default;
$color-orange-400: #f6ad55 !default;
$color-orange-500: #ed8936 !default;
$color-orange-600: #dd6b20 !default;
$color-orange-700: #c05621 !default;
$color-orange-800: #9c4221 !default;
$color-orange-900: #7b341e !default;

$colors: (
  "white": $color-white,
  "black": $color-black,
  gray-100: $color-gray-100,
  gray-200: $color-gray-200,
  gray-300: $color-gray-300,
  gray-400: $color-gray-400,
  gray-500: $color-gray-500,
  gray-600: $color-gray-600,
  gray-700: $color-gray-700,
  gray-800: $color-gray-800,
  gray-900: $color-gray-900,
  red-100: $color-red-100,
  red-200: $color-red-200,
  red-300: $color-red-300,
  red-400: $color-red-400,
  red-500: $color-red-500,
  red-600: $color-red-600,
  red-700: $color-red-700,
  red-800: $color-red-800,
  red-900: $color-red-900,
  green-100: $color-green-100,
  green-200: $color-green-200,
  green-300: $color-green-300,
  green-400: $color-green-400,
  green-500: $color-green-500,
  green-600: $color-green-600,
  green-700: $color-green-700,
  green-800: $color-green-800,
  green-900: $color-green-900,
  blue-100: $color-blue-100,
  blue-200: $color-blue-200,
  blue-300: $color-blue-300,
  blue-400: $color-blue-400,
  blue-500: $color-blue-500,
  blue-600: $color-blue-600,
  blue-700: $color-blue-700,
  blue-800: $color-blue-800,
  blue-900: $color-blue-900,
  orange-100: $color-orange-100,
  orange-200: $color-orange-200,
  orange-300: $color-orange-300,
  orange-400: $color-orange-400,
  orange-500: $color-orange-500,
  orange-600: $color-orange-600,
  orange-700: $color-orange-700,
  orange-800: $color-orange-800,
  orange-900: $color-orange-900
) !default;

// Spacing (Margin & Padding)

$spacing-0: 0 !default;
$spacing-1: 0.25rem !default;
$spacing-2: 0.5rem !default;
$spacing-3: 0.75rem !default;
$spacing-4: 1rem !default;
$spacing-5: 1.25rem !default;
$spacing-6: 1.5rem !default;
$spacing-7: 1.75rem !default;
$spacing-8: 2rem !default;
$spacing-9: 2.25rem !default;
$spacing-10: 2.5rem !default;
$spacing-12: 3rem !default;
$spacing-16: 4rem !default;
$spacing-20: 5rem !default;
$spacing-24: 6rem !default;
$spacing-32: 8rem !default;
$spacing-40: 10rem !default;
$spacing-48: 12rem !default;
$spacing-56: 14rem !default;
$spacing-64: 16rem !default;
$spacing-px: 1px !default;
$spacing-auto: auto !default;

$spacings: (
  0: $spacing-0,
  1: $spacing-1,
  2: $spacing-2,
  3: $spacing-3,
  4: $spacing-4,
  5: $spacing-5,
  6: $spacing-6,
  7: $spacing-7,
  8: $spacing-8,
  9: $spacing-9,
  10: $spacing-10,
  12: $spacing-12,
  16: $spacing-16,
  20: $spacing-20,
  24: $spacing-24,
  32: $spacing-32,
  40: $spacing-40,
  48: $spacing-48,
  56: $spacing-56,
  64: $spacing-64,
  px: $spacing-px,
  auto: $spacing-auto
) !default;

// Font Families //

$font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
$font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

// Font Size //

$text-xs: 0.75rem !default;
$text-sm: 0.875rem !default;
$text-base: 1rem !default;
$text-lg: 1.125rem !default;
$text-xl: 1.25rem !default;

$sizes: (
  xs: $text-xs,
  sm: $text-sm,
  md: $text-base,
  lg: $text-lg,
  xl: $text-xl
) !default;

// Font Weight //

$font-hairline: 100 !default;
$font-thin: 200 !default;
$font-light: 300 !default;
$font-normal: 400 !default;
$font-medium: 500 !default;
$font-semibold: 600 !default;
$font-bold: 700 !default;
$font-extrabold: 800 !default;
$font-black: 900 !default;

// Letter Spacing //

$tracking-tighter: -0.05em !default;
$tracking-tight: -0.025em !default;
$tracking-normal: 0 !default;
$tracking-wide: 0.025em !default;
$tracking-wider: 0.05em !default;
$tracking-widest: 0.1em !default;

// Line Height //

$leading-none: 1 !default;
$leading-tight: 1.25 !default;
$leading-snug: 1.375 !default;
$leading-normal: 1.5 !default;
$leading-relaxed: 1.625 !default;
$leading-loose: 2 !default;

// Border //

$border-0: 0 !default;
$border-1: 1px !default;
$border-2: 2px !default;
$border-4: 4px !default;
$border-8: 8px !default;

// Border Radius //

$rounded-none: 0 !default;
$rounded-sm: 0.125rem !default;
$rounded: 0.25rem !default;
$rounded-lg: 0.5rem !default;
$rounded-full: 9999px !default;

// Opacity //

$opacity-100: 1 !default;
$opacity-75: 0.75 !default;
$opacity-50: 0.5 !default;
$opacity-25: 0.25 !default;
$opacity-0: 0 !default;

// Grid //

$grid-col-12: 100% !default;
$grid-col-11: 91.66666667% !default;
$grid-col-10: 83.33333333% !default;
$grid-col-9: 75% !default;
$grid-col-8: 66.66666667% !default;
$grid-col-7: 58.33333333% !default;
$grid-col-6: 50% !default;
$grid-col-5: 41.66666667% !default;
$grid-col-4: 33.33333333% !default;
$grid-col-3: 25% !default;
$grid-col-2: 16.66666667% !default;
$grid-col-1: 8.33333333% !default;

$grid-cols: (
  1: $grid-col-1,
  2: $grid-col-2,
  3: $grid-col-3,
  4: $grid-col-4,
  5: $grid-col-5,
  6: $grid-col-6,
  7: $grid-col-7,
  8: $grid-col-8,
  9: $grid-col-9,
  10: $grid-col-10,
  11: $grid-col-11,
  12: $grid-col-12
) !default;

$grid-gutter: 1rem !default;