@use "./theme";

// Breakpoints
// ---

$breakpoint-xs: 480px !default;
$breakpoint-sm: 620px !default;
$breakpoint-md: 760px !default;
$breakpoint-lg: 990px !default;
$breakpoint-xl: 1380px !default;

$breakpoints: (
  "xs": $breakpoint-xs,
  "sm": $breakpoint-sm,
  "md": $breakpoint-md,
  "lg": $breakpoint-lg,
  "xl": $breakpoint-xl
) !default;

// Gap
// ---

$gap: 1em !default;
$gap-map: (
  "none": 0,
  "xs": 0.25em,
  "sm": 0.5em,
  "md": 1em,
  "lg": 1.5em,
  "xl": 2em
) !default;

// Padding
// ---

$padding: 0.5em 1em !default;
$padding-sm: 0.25rem 0.5rem !default;
$padding-lg: 0.648rem 1.5rem !default;

// Border
// ---

// Border styles
$border-width: 1px !default;
$border-style: solid !default;

// Compiled border
$border: $border-width $border-style theme.$border-color !default;
$border-light: $border-width $border-style theme.$border-color-light !default;
$border-dark: $border-width $border-style theme.$border-color-dark !default;
$border-darker: $border-width $border-style theme.$border-color-darker !default;

// Compiled border invert
$border-invert: $border-width $border-style theme.$border-color-invert !default;
$border-invert-light: $border-width $border-style theme.$border-color-invert-light !default;
$border-invert-dark: $border-width $border-style theme.$border-color-invert-dark !default;
$border-invert-darker: $border-width $border-style theme.$border-color-invert-darker !default;

// Border radius
// ---

$border-radius: 0.25rem !default;
$border-radius-circle: 9999px !default;

// Form controls
// ---

$form-control-size: 2.5rem !default; // 40px
$form-control-size-sm: 1.875rem !default; // 30px
$form-control-size-lg: 3.125rem !default; // 50px

// Typography
// ---

$font-family-sans: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif !default;
$font-family-serif: constantia, "Lucida Bright", lucidabright, "Lucida Serif", lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", georgia, serif !default;
$font-family-mono: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family: $font-family-sans !default;

// Front size
$font-size: 16px !default;
$font-size-sm: 0.875rem !default; // 14px
$font-size-lg: 1.125rem !default; // 18px

// Font weight
$font-weight-thin: 100 !default;
$font-weight-extra-light: 200 !default;
$font-weight-light: 300 !default;
$font-weight-regular: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semi-bold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-extra-bold: 800 !default;
$font-weight-black: 900 !default;

$font-weight-map: (
  "thin": $font-weight-thin,
  "extra-light": $font-weight-extra-light,
  "light": $font-weight-light,
  "regular": $font-weight-regular,
  "medium": $font-weight-medium,
  "semi-bold": $font-weight-semi-bold,
  "bold": $font-weight-bold,
  "extra-bold": $font-weight-extra-bold,
  "black": $font-weight-black,
) !default;

// Line height
$line-height: 1.5 !default; // 24px
$line-height-sm: 1.375 !default; // 22px
$line-height-lg: 1.625 !default; // 26px

// Box shadow
// ---

$box-shadow-1: 0 0 2px 1px rgba(theme.$box-shadow-color, 0.05), 0 1px 3px rgba(theme.$box-shadow-color, 0.2) !default;
$box-shadow-2: 0 0 2px 1px rgba(theme.$box-shadow-color, 0.05), 0 2px 6px rgba(theme.$box-shadow-color, 0.2) !default;
$box-shadow-3: 0 0 2px 1px rgba(theme.$box-shadow-color, 0.05), 0 4px 12px rgba(theme.$box-shadow-color, 0.2) !default;
$box-shadow-4: 0 0 2px 1px rgba(theme.$box-shadow-color, 0.05), 0 8px 18px rgba(theme.$box-shadow-color, 0.2) !default;
$box-shadow-5: 0 0 2px 1px rgba(theme.$box-shadow-color, 0.05), 0 12px 24px rgba(theme.$box-shadow-color, 0.2) !default;
$box-shadow: $box-shadow-2 !default;

// Transition
// ---
// property | duration | timing-function | delay

$transition-duration: 0.3s !default;
$transition-duration-short: 0.15s !default;
$transition-duration-long: 0.6s !default;
$transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;