:root {
  --primary-color: #202020;
  --rgb-primary: 32,32,32;
  --bg-color: #f9f9f9;
}

[data-theme="dark"] {
  --primary-color: #dbdbdb;
  --rgb-primary: 219,219,219;
  --bg-color: #171717;
}

// Root
$root-font-family: 'Inter', system-ui, sans-serif;
$root-font-family-var: 'Inter var', system-ui, sans-serif;
$root-font-size: 16px;
$root-letter-spacing: -0.011em;
$root-line-height: 22px;

// Responsive
$large-breakpoint: 1024px;
$medium-breakpoint: 768px;
$large-font-size: 18px;
$large-font-letter-spacing: -0.014em;
$large-font-line-height: 25px;

// Typography
//
// Headings, body text, lists, and other misc typographic elements.

$headings-margin-top: 1.75rem;
$headings-margin-bottom: 0.75rem;
$headings-color: var(--primary-color);

$heading-xl: (
  font-size: 40px,
  font-weight: 500,
  letter-spacing: -0.022em,
  line-height: 56px,
);
$heading-lg: (
  font-size: 24px,
  font-weight: 500,
  letter-spacing: -0.019em,
  line-height: 34px,
);
$heading-md: (
  font-size: 20px,
  font-weight: 500,
  letter-spacing: -0.017em,
  line-height: 28px,
);
$heading-sm: (
  font-size: 18px,
  font-weight: 500,
  letter-spacing: -0.014em,
  line-height: 25px,
);
$heading-xs: (
  font-size: 16px,
  font-weight: 500,
  letter-spacing: -0.011em,
  line-height: 22px,
);

$body-lg: (
  font-size: 18px,
  font-weight: 400,
  letter-spacing: -0.014em,
  line-height: 25px,
);

$body-md: (
  font-size: 16px,
  font-weight: 400,
  letter-spacing: -0.011em,
  line-height: 22px,
);

$body-sm: (
  font-size: 14px,
  font-weight: 400,
  letter-spacing: -0.006em,
  line-height: 20px,
);

$body-xs: (
  font-size: 13px,
  font-weight: 400,
  letter-spacing: -0.003em,
  line-height: 18px,
);

$code-font-family: "IBM Plex Mono", monospace;
$code-color: #bf616a;


// Add properties
// Used to convert elements of Sass maps into CSS attributes

@mixin properties($map) {
  @each $name, $value in $map {
    #{$name}: $value;
  }
}