@use "_colours.scss";
@use "fonts/_fonts.scss";

// Fonts

$font-size: 16px;

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    font-size: $font-size;
}

@mixin font--tnum {
    font-feature-settings: "tnum" 1;
}

.font--tnum {
    @include font--tnum;
}

@supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
}

@mixin font--monospace-regular {
    font-family: "IBM Plex Mono", monospace;
    font-weight: normal;
    font-style: normal;
}

.font--monospace {
    @include font--monospace-regular;
}

.font--monospace-regular {
    @include font--monospace-regular;
}

@mixin font--monospace-semibold {
    @include font--monospace-regular;
    font-weight: 500;
}

.font--monospace-semibold {
    @include font--monospace-semibold;
}

@mixin font--monospace-bold {
    @include font--monospace-regular;
    font-weight: bold;
}

.font--monospace-bold {
    @include font--monospace-bold;
}

@mixin font--small {
    font-size: $font-size * 0.75;
}

.font--small {
    @include font--small;
}

// Text styling

main {
    line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {
    @include font--monospace-bold;
    line-height: unset;
}

$_heading-margins: (h1: 0.67em 0, h2: 0.75em 0, h3: 0.83em 0, h4: 1.12em 0, h5: 1.5em 0, h6: 1.67em 0);
@each $name, $value in $_heading-margins {
    #{$name}, .#{$name} {
        margin: #{$value};
    }
}

$_heading-sizes: (h1: 2em, h2: 1.5em, h3: 1.17em, h4: 1em, h5: 0.83em, h6: 0.67em);
@each $name, $value in $_heading-sizes {
    #{$name}, .#{$name} {
        font-size: #{$value};
    }
}

@each $v in (p, h1, h2, h3, h4, h5, h6) {
    #{$v}:first-child {
        margin-top: 0;
    }
}

ol, li {
    &::marker {
        color: colours.$brand;
    }
}

.brand-label {
    padding: 5px;
    color: white !important;
    background-color: colours.$brand;
    text-decoration: none;
    
    &:hover {
        filter: brightness(0.8);
    }
}

a:link, a:visited {
    color: colours.$brand;
}

a:hover, a:active, a.active {
    color: colours.$brand--70;
}

a:hover > img {
    // are images typography? debatable.
    // does it feel right to put this here? yes.
    filter: brightness(0.8);
}

hr {
    border: 1px solid colours.$brand--20;
}

.footnotes *:target {
    background-color: colours.$brand--10;
}

@mixin text--secondary {
    color: colours.$grey--60
}

.text--secondary {
    @include text--secondary;
    
    a:link, a:visited {
        color: colours.$grey--60;
    }
    
    a:hover, a:active, a.active {
        color: colours.$grey--80;
    }
}
