@use "sass:math";

$dark-color-palette: (
  background: hsl(240, 7%, 11%),
  foreground: hsl(240, 4%, 98%),
  muted: hsl(240, 4%, 17%),
  muted-foreground: hsl(240, 4%, 66%),
  border: hsl(240, 4%, 17%),
  primary: hsl(342, 100%, 74%),
  primary-foreground: hsl(240, 4%, 98%),
  secondary: hsl(240, 4%, 17%),
  secondary-foreground: hsl(240, 4%, 98%),
  accent: hsl(240, 4%, 17%),
  accent-foreground: hsl(240, 4%, 98%),
  destructive: hsl(342, 100%, 74%),
  destructive-foreground: hsl(240, 7%, 11%),
  positive: hsl(162, 52%, 53%),
  positive-foreground: hsl(240, 7%, 11%),
);

$light-color-palette: (
  background: hsl(0, 0%, 100%),
  foreground: hsl(240, 7%, 11%),
  muted: hsl(240, 6%, 96%),
  muted-foreground: hsl(240, 6%, 46.1%),
  border: hsl(240, 2%, 89%),
  primary: hsl(342, 100%, 47%),
  primary-foreground: hsl(240, 4%, 98%),
  secondary: hsl(240, 6%, 96%),
  secondary-foreground: hsl(240, 2%, 17%),
  accent: hsl(240, 6%, 96%),
  accent-foreground: hsl(240, 2%, 17%),
  destructive: hsl(342, 100%, 47%),
  destructive-foreground: hsl(240, 7%, 11%),
  positive: hsl(162, 52%, 53%),
  positive-foreground: hsl(240, 7%, 11%)
);

$typography-root-font-size: 100;
$typography-base-font-size: 16px;
$typography-small-font-size: 14px;
$typography-base-line-height: 1.625;
$typography-leading: math.round(16 * math.div($typography-root-font-size, 100) * $typography-base-line-height);
$typography-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;

$button-height: 40px;
$button-border-radius: 20px;

$layout-post-single-width: 945px;
$layout-post-width: $layout-post-single-width - 305px;

$layout-gap: 30px;
$layout-width: 1070px;
$layout-breakpoint-sm: 685px;
$layout-breakpoint-md: 960px;
$layout-breakpoint-lg: 1100px;
