@use 'frappe' as theme;

$font-stack: 'Noto Sans', sans-serif;

@mixin all-headings {
  @for $index from 1 through 6 {
      h#{$index} {
       @content;
    }
  }
}


body {
  font: 100% $font-stack;
  background-color: theme.$crust;
  color: theme.$text;
}

@include all-headings {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: theme.$peach;
}

a {
  text-decoration: none;
}

a:link {
  color: theme.$blue;
  &:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: theme.$blue;
  }
}

a:visited {
  color: theme.$mauve;
  &:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: theme.$mauve;
  }
}


nav {
  text-decoration: none;
  a {
    color: theme.$text;
    background-color: theme.$surface1;
    padding: 0.2em;
  }
  .active {
    background-color: theme.$overlay1;
    color: theme.$text;
  }
}