// Used in layout
$padding-1: 1px !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-16: 1rem !default;

$body-min-width: 20rem !default;
$container-max-width: 80rem !default;

$menu-width: 16rem !default;
$toc-width: 16rem !default;

$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;

:root {
  --font-size: 16px;
  --font-size-smaller: 0.875rem;
  --font-size-smallest: 0.75rem;

  --body-font-weight: 400;
  --body-background: white;
  --body-background-tint: transparent;
  --body-font-color: black;

  --border-radius: 0.25rem;
}

// Convenience mixing to declare a color and a transparent tint
@mixin accent($name, $color, $tint: 0.1) {
  --color-accent-#{$name}: #{$color};
  --color-accent-#{$name}-tint: #{rgba($color, $tint)};
}

// Themes
@mixin theme-light { // made to look like 'browser default'
  --body-background: white;
  --body-background-tint: none;
  --body-font-color: black;

  --color-link: #0055bb;
  --color-visited-link: #5500bb;

  --icon-filter: none;

  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-500: #adb5bd;

  @include accent("default", #64748b);
  @include accent("note", #4486dd);
  @include accent("tip", #3bad3b);
  @include accent("important", #8144dd);
  @include accent("warning", #f59e42);
  @include accent("caution", #d84747);

  // Fallback for {{< hint >}} shortcodes
  @include accent("info", #4486dd);
  @include accent("success", #3bad3b);
  @include accent("danger", #d84747);
}

@mixin theme-dark { // based on https://www.nordtheme.com/
  --body-background: #2e3440;
  --body-background-tint: none;

  --body-font-color: #eceff4;

  --color-link: #81a1c1;
  --color-visited-link: #81a1c1;

  --icon-filter: brightness(0) invert(1);

  --gray-100: #3b4252;
  --gray-200: #434c5e;
  --gray-500: #d8dee9;

  @include accent("default", #81a1c1);
  @include accent("note", #5e81ac);
  @include accent("tip", #a3be8c);
  @include accent("important", #b48ead);
  @include accent("warning", #d08770);
  @include accent("caution", #bf616a);

  // Fallback for {{< hint >}} shortcodes
  @include accent("info", #5e81ac);
  @include accent("success", #a3be8c);
  @include accent("danger", #bf616a);
}

@mixin theme-auto {
  @include theme-light;

  @media (prefers-color-scheme: dark) {
    @include theme-dark;
  }
}