/**
 * CSS for Mavs Iosevka Light
 * Generated by Wakamai Fondue - https://wakamaifondue.com
 * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl
 */

@layer fonts {
    @font-face {
        font-family: "Mavs Iosevka Light";
        src: url("/assets/fonts/primary.woff2") format("woff2");
        unicode-range: U+000D, U+0020-007E, U+00A0, U+00A2-00A9, U+00AC-00AE,
        U+00B0-00B7, U+00B9-00BA, U+00BC-00BE, U+00D7, U+00F7, U+2000-200D,
        U+2010-2027, U+202F-2064, U+2074, U+20AC, U+2122, U+2190-21BB, U+2212,
        U+2215, U+FFFD;
        font-display: block;
    }

    @font-face {
        font-family: "Geist Regular";
        src: url("/assets/fonts/secondary.woff2") format("woff2-variations");
        font-weight: 32 240;
        unicode-range: U+0020-007E, U+00A0, U+00A2-00A9, U+00AC-00AE,
        U+00B0-00B7, U+00B9-00BA, U+00BC-00BE, U+00D7, U+00F7, U+2013-2014,
        U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033,
        U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2190-2199, U+219D,
        U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+2212;
        font-display: block;
    }

    /* Set custom properties for each layout feature */
    :root {
        --mavs-iosevka-light-frac: "frac" off;
        --mavs-iosevka-light-lnum: "lnum" off;
        --mavs-iosevka-light-onum: "onum" off;
        --mavs-iosevka-light-ss01: "ss01" off;
        --mavs-iosevka-light-ss03: "ss03" off;
        --mavs-iosevka-light-zero: "zero" off;

        --geist-regular-dlig: "dlig" off;
        --geist-regular-frac: "frac" off;
        --geist-regular-pnum: "pnum" off;
        --geist-regular-ss01: "ss01" off;
        --geist-regular-ss03: "ss03" off;
        --geist-regular-subs: "subs" off;
        --geist-regular-sups: "sups" off;
        --geist-regular-tnum: "tnum" off;
    }

    /* If class is applied, update custom property and
       apply modern font-variant-* when supported */
    .mavs-iosevka-light-frac {
        --mavs-iosevka-light-frac: "frac" on;
    }

    @supports (font-variant-numeric: diagonal-fractions) {
        .mavs-iosevka-light-frac {
            --mavs-iosevka-light-frac: "____";
            font-variant-numeric: diagonal-fractions;
        }
    }

    .mavs-iosevka-light-lnum {
        --mavs-iosevka-light-lnum: "lnum" on;
    }

    @supports (font-variant-numeric: lining-nums) {
        .mavs-iosevka-light-lnum {
            --mavs-iosevka-light-lnum: "____";
            font-variant-numeric: lining-nums;
        }
    }

    .mavs-iosevka-light-onum {
        --mavs-iosevka-light-onum: "onum" on;
    }

    @supports (font-variant-numeric: oldstyle-nums) {
        .mavs-iosevka-light-onum {
            --mavs-iosevka-light-onum: "____";
            font-variant-numeric: oldstyle-nums;
        }
    }

    .mavs-iosevka-light-ss01 {
        --mavs-iosevka-light-ss01: "ss01" on;
    }

    .mavs-iosevka-light-ss03 {
        --mavs-iosevka-light-ss03: "ss03" on;
    }

    .mavs-iosevka-light-zero {
        --mavs-iosevka-light-zero: "zero" on;
    }

    @supports (font-variant-numeric: slashed-zero) {
        .mavs-iosevka-light-zero {
            --mavs-iosevka-light-zero: "____";
            font-variant-numeric: slashed-zero;
        }
    }

    /* Apply current state of all custom properties
       whenever a class is being applied */
    .mavs-iosevka-light-frac,
    .mavs-iosevka-light-lnum,
    .mavs-iosevka-light-onum,
    .mavs-iosevka-light-ss01,
    .mavs-iosevka-light-ss03,
    .mavs-iosevka-light-zero {
        font-feature-settings: var(--mavs-iosevka-light-frac), var(--mavs-iosevka-light-lnum),
        var(--mavs-iosevka-light-onum), var(--mavs-iosevka-light-ss01), var(--mavs-iosevka-light-ss03),
        var(--mavs-iosevka-light-zero);
    }


    /* If class is applied, update custom property and
       apply modern font-variant-* when supported */
    .geist-regular-dlig {
        --geist-regular-dlig: "dlig" on;
    }

    @supports (font-variant-ligatures: discretionary-ligatures) {
        .geist-regular-dlig {
            --geist-regular-dlig: "____";
            font-variant-ligatures: discretionary-ligatures;
        }
    }

    .geist-regular-frac {
        --geist-regular-frac: "frac" on;
    }

    @supports (font-variant-numeric: diagonal-fractions) {
        .geist-regular-frac {
            --geist-regular-frac: "____";
            font-variant-numeric: diagonal-fractions;
        }
    }

    .geist-regular-pnum {
        --geist-regular-pnum: "pnum" on;
    }

    @supports (font-variant-numeric: proportional-nums) {
        .geist-regular-pnum {
            --geist-regular-pnum: "____";
            font-variant-numeric: proportional-nums;
        }
    }

    .geist-regular-ss01 {
        --geist-regular-ss01: "ss01" on;
    }

    .geist-regular-ss03 {
        --geist-regular-ss03: "ss03" on;
    }

    .geist-regular-subs {
        --geist-regular-subs: "subs" on;
    }

    @supports (font-variant-position: sub) {
        .geist-regular-subs {
            --geist-regular-subs: "____";
            font-variant-position: sub;
        }
    }

    .geist-regular-sups {
        --geist-regular-sups: "sups" on;
    }

    @supports (font-variant-position: super) {
        .geist-regular-sups {
            --geist-regular-sups: "____";
            font-variant-position: super;
        }
    }

    .geist-regular-tnum {
        --geist-regular-tnum: "tnum" on;
    }

    @supports (font-variant-numeric: tabular-nums) {
        .geist-regular-tnum {
            --geist-regular-tnum: "____";
            font-variant-numeric: tabular-nums;
        }
    }

    /* Apply current state of all custom properties
       whenever a class is being applied */
    .geist-regular-dlig,
    .geist-regular-frac,
    .geist-regular-pnum,
    .geist-regular-ss01,
    .geist-regular-ss03,
    .geist-regular-subs,
    .geist-regular-sups,
    .geist-regular-tnum {
        font-feature-settings: var(--geist-regular-dlig), var(--geist-regular-frac),
        var(--geist-regular-pnum), var(--geist-regular-ss01), var(--geist-regular-ss03),
        var(--geist-regular-subs), var(--geist-regular-sups), var(--geist-regular-tnum);
    }

    /* Variable instances */
    .geist-regular-thin {
        font-variation-settings: "wght" 32;
    }

    .geist-regular-ultralight {
        font-variation-settings: "wght" 42;
    }

    .geist-regular-light {
        font-variation-settings: "wght" 68;
    }

    .geist-regular-regular {
        font-variation-settings: "wght" 84;
    }

    .geist-regular-medium {
        font-variation-settings: "wght" 106;
    }

    .geist-regular-semibold {
        font-variation-settings: "wght" 126;
    }

    .geist-regular-bold {
        font-variation-settings: "wght" 146;
    }

    .geist-regular-black {
        font-variation-settings: "wght" 176;
    }

    .geist-regular-ultrablack {
        font-variation-settings: "wght" 208;
    }
}

@layer reset {
    /*https://andy-bell.co.uk/a-more-modern-css-reset/*/
    /* Box sizing rules */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Prevent font size inflation */
    html {
        text-size-adjust: none;
    }

    html, body {
        width: 100vw;
        height: 100vh;
    }

    body, h1, h2, h3, h4, p,
    figure, blockquote, dl, dd {
        font-weight: inherit;
        margin: 0;
    }

    h1, h2, h3, h4,
    button, input, label {
        line-height: 1.1;
    }

    input, button,
    textarea, select {
        font: inherit;
    }

    img, picture {
        image-rendering: crisp-edges;
    }
}


:root {
    color-scheme: light;
    forced-color-adjust: none;

    --pale-cyan: oklch(0.971 0.014 258.345);
    --light-cyan: oklch(0.794 0.104 230.694);
    --bright-cyan: oklch(0.946 0.027 230.349);
    --dark-cyan: oklch(0.537 0.135 249.34);
    --pink: oklch(0.69 0.171 359.49);
    --purple: oklch(0.479 0.159 324.484);
    --red: oklch(0.507 0.208 29.234);
    --green: oklch(0.662 0.183 149.825);
    --light-green: oklch(0.851 0.187 149.407);
    --blue: oklch(0.536 0.15 249.661);
    --white: oklch(1 0 none);
    --black: oklch(0 0 none);
    --grey-light: oklch(0.845 0 none);
    --grey-medium: oklch(0.464 0 none);
    --grey-dark: oklch(0.321 0 none);
    --blackish: oklch(0.176 0.004 345.707);

    --background-color: var(--white);
    --background-color-dark: var(--grey-dark);

    --icon-size: 0.75em;

    --font-primary: "Mavs Iosevka Light", sans-serif;
    --font-primary-weight: regular;
    --font-secondary: "Geist Regular", sans-serif;
    --font-secondary-weight: 32;

    --text-color: var(--grey-medium);
    --text-color-over-dark: var(--bright-cyan);

    --dev-emphasis: var(--red);
    --com-emphasis: var(--green);
    --other-emphasis: var(--blue);

    --page-width-minimum: 719px;
    --page-width-maximum: 1280px;
    --max-clamped-width: clamp(var(--page-width-minimum), 100%, var(--page-width-maximum));
    --spacer-margin: clamp(0.3lh, 0.1vh, 1ch);

    --page-header-height: 2cm;
    --page-footer-height: 2rem;
    --legend-sticky-top: var(--page-header-height);

    /* the magic numbers below come from svg viewbox to determine exact aspect ratio to scale the image width by */
    --banner-right-image-width: calc(var(--page-header-height) * 531.45 / 354.3);
    --banner-right-image-height: var(--page-header-height);

    --title-highlight: var(--white);
    --page-header-font-family: var(--font-secondary);
    --page-header-font-weight: var(--font-secondary-weight);

    --page-header-text-color: var(--light-cyan);
    --page-footer-text-color: var(--grey-light);

    --page-header-background-color: var(--dark-cyan);
    --page-footer-border-color: var(--grey-light);


}