@use './utils' as *;

$font-family: (
  body: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"),
  mono: (Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),
  heading: var(--font-family-body),
);

$font-weight: (
  normal:  400,
  medium:  600,
  bold:    700,
  black:   800,
  heading: 700,
);

// https://clamp.font-size.app
$font-size: (
  em: 16px,
  xs: 0.750rem, // 12px
  sm: 0.875rem, // 14px
  md: 1.000rem, // 16px
  lg: 1.125rem, // 18px
  xl: 1.250rem, // 20px
  h6: clamp-builder(16px, 18px, 560px, 960px),
  h5: clamp-builder(18px, 20px, 560px, 960px),
  h4: clamp-builder(20px, 24px, 560px, 960px),
  h3: clamp-builder(24px, 28px, 560px, 960px),
  h2: clamp-builder(28px, 32px, 560px, 960px),
  h1: clamp-builder(32px, 40px, 560px, 960px),
);

$line-height: (
  xs: 1.125,
  sm: 1.250,
  md: 1.500,
  lg: 1.750,
  xl: 2.000,
);

$border-radius: (
  xs: 0.1875rem, //  3px
  sm: 0.3125rem, //  5px
  md: 0.5000rem, //  8px
  lg: 0.7500rem, // 12px
  xl: 1.1250rem, // 18px
);

$spacing: (
  2xs: clamp-builder(08px, 10px, 560px, 960px),
  xs:  clamp-builder(12px, 14px, 560px, 960px),
  sm:  clamp-builder(16px, 20px, 560px, 960px),
  md:  clamp-builder(22px, 28px, 560px, 960px),
  lg:  clamp-builder(30px, 38px, 560px, 960px),
  xl:  clamp-builder(40px, 50px, 560px, 960px),
  2xl: clamp-builder(52px, 64px, 560px, 960px),
);

$drop-shadow: (
  rgb(0 0 0 / 10%) 0 0 0 1px,
  rgb(0 0 0 / 5%) 0 80px 80px,
  rgb(0 0 0 / 4%) 0 40px 40px,
  rgb(0 0 0 / 3%) 0 20px 20px,
  rgb(0 0 0 / 2%) 0 10px 10px
);

$ease-out-cubic:  cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-out-bounce: cubic-bezier(0.1, 1.3, 0.7, 1.1);

$light-colors: (
  black:      #000000,
  white:      #FFFFFF,
  fg:         #101010,
  bg:         #FFFFFF,
  input:      #FFFFFF,
  popup:      #FFFFFF,
  dialog:     #FFFFFF,
  backdrop:   rgb(0 0 0 / 50%),
  focus:      var(--color-accent-400),
  link:       var(--color-blue-500),
  link-hover: var(--color-blue-600),
  heading:    var(--color-fg),
);

$dark-colors: (
  fg:         #F0F0F0,
  bg:         #131313,
  input:      #0C0C0C,
  popup:      #202020,
  dialog:     #191919,
  backdrop:   rgb(0 0 0 / 70%),
);

$light-palette: (
  colors: (
    accent: #0070F7,
    gray:   #8D8D96,
    brown:  #A08060,
    red:    #F03020,
    orange: #FF8000,
    yellow: #FFBB00,
    green:  #20B610,
    teal:   #30B0C0,
    cyan:   #30B0F0,
    blue:   #0070F7,
    indigo: #6056ED,
    purple: #A949D9,
    pink:   #F74599,
  ),
  tints: (
    50:  95%,
    100: 90%,
    200: 80%,
    300: 60%,
    400: 30%,
    500: 0%,
    600: -20%,
    700: -40%,
    800: -60%,
  ),
);

$dark-palette: (
  colors: (
    accent: #0080FF,
    gray:   #656573,
    brown:  #A08060,
    red:    #F03020,
    orange: #FF8000,
    yellow: #FFBB00,
    green:  #20B610,
    teal:   #30B0C0,
    cyan:   #30B0F0,
    blue:   #0080FF,
    indigo: #7369FF,
    purple: #B353E3,
    pink:   #F74599,
  ),
  tints: (
    50:  95%,
    100: 90%,
    200: 80%,
    300: 60%,
    400: 30%,
    500: 0%,
    600: -20%,
    700: -40%,
    800: -60%,
  ),
);