@font-face {
    font-family: 'Afacad Regular';
    src: url('../assets/fonts/Afacad-Regular.ttf') format('truetype');
    size-adjust: 120%;
    font-display: swap;
}

:root {
    --primary-light: oklch(85% 30% 260);
    --primary-dark: oklch(40% 30% 260);

    --secondary-light: oklch(85% 30% 300);
    --secondary-dark: oklch(35% 30% 300);

    --light-1: oklch(99% 3% 260);
    --light-2: oklch(96% 4% 260);
    --light-3: oklch(93% 5% 260);
    --light-4: oklch(91% 6% 260);
    --light-5: oklch(89% 7% 260);

    --tinted: oklch(30% 20% 260);

    --dark-1: oklch(10% 6% 260);
    --dark-2: oklch(15% 6% 260);
    --dark-3: oklch(20% 10% 260);
    --dark-4: oklch(25% 12% 260);
    --dark-5: oklch(30% 15% 260);

    --body-bg: light-dark(var(--light-3), var(--dark-1));
    --heading: light-dark(var(--dark-4), var(--light-2));
    --color: light-dark(var(--dark-5), var(--light-3));

    --name-path-color: light-dark(var(--primary-dark), var(--primary-light));

    --link: light-dark(var(--primary-dark), var(--primary-light));
    --visited: light-dark(var(--secondary-dark), var(--secondary-light));

    --header-bg: light-dark(var(--light-1), var(--dark-3));
    --hero-bg: light-dark(var(--light-1), var(--dark-3));
    --footer-bg: light-dark(var(--light-1), var(--dark-3));
    --separator: light-dark(var(--light-1), var(--dark-3));
    --card-bg: light-dark(var(--light-1), var(--dark-3));

    --item-bg: light-dark(var(--light-2), var(--dark-4));

    --pill-bg: light-dark(var(--light-1), var(--dark-3));
    --pill-color: light-dark(var(--dark-4), var(--light-2));

    --tooltip-bg: light-dark(var(--light-1), var(--dark-3));
    --tooltip-color: light-dark(var(--dark-2), var(--light-2));

    --icon: light-dark(var(--light-2), var(--dark-2));

    --selection-bg: light-dark(var(--primary-dark), var(--primary-light));
    --selection-color: light-dark(var(--light-1), var(--dark-3));

    --shadow-1: 0px 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-2: 0px 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-fix: 0px 0px 0px 2px light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));

    --time-s: 0.1s;
    --time-m: 0.2s;
    --time-l: 0.5s;

    color-scheme: light dark;

    @media (prefers-reduced-motion: reduce) {
        --time-s: 0s;
        --time-m: 0s;
        --time-l: 0s;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

::selection {
    background-color: var(--selection-bg);
    color: var(--selection-color);
}

html {
    font-size: 1rem;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Afacad Regular', sans-serif;
    color: var(--color);
    background-color: var(--body-bg);
    transition: color var(--time-m) ease,
        background-color var(--time-m) ease;
}

:where(a) {
    color: var(--link);

    &:where(:visited) {
        color: var(--visited);
    }

    &:has([class*='icon']) {
        border-radius: 999px;
        box-shadow: var(--shadow-2);
        transition: transform var(--time-s) ease;

        @media (hover: hover) {

            &:hover {
                transform: scale(1.05);
            }

            &:active {
                transform: scale(0.95);
            }
        }

        @media (hover: none) {

            &:active {
                transform: scale(1.05);
            }
        }
    }
}

:where(a,
    button) {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;

    &:focus-visible {
        outline: 3px solid blue;
        outline-offset: 4px;
        box-shadow: 0px 0px 0px 3px red;
    }
}

:where(:disabled) {
    cursor: not-allowed;
}

:where(h1, h2, h3, h4) {
    margin: 0;
    color: var(--heading);
}

:where(h1) {
    font-size: 2rem;
}

:where(h2) {
    font-size: 1.8rem;
    margin-bottom: 1.25rem;
}

:where(h3) {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

:where(h4) {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

:where(p) {
    font-size: 1.2rem;
    margin: 1em 0;
}

:where(small) {
    font-size: 0.9rem;
}

:where(ul) {
    --marker-size: 1.5rem;
    padding-left: calc(1.5 * var(--marker-size));

    &>li {
        line-height: var(--marker-size);
    }

    &>li::marker {
        font-size: var(--marker-size);
    }
}

hr {
    height: auto;
    aspect-ratio: 15/1;
    margin: -1px 0 0;
    background-color: var(--separator);
    border: none;
    clip-path: url(#horizontal-rule);
    transition: background-color var(--time-m) ease;

    &.reversed {
        margin: 0px 0 -1px;
        transform: rotate(180deg);
    }
}

#hr-template {
    position: absolute;
    width: 0;
    height: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flex-row {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-align-center {
    align-items: center;
}

.flex-justify-center {
    justify-content: center;
}

.flex-space-between {
    justify-content: space-between;
}

.gap05 {
    gap: 0.5rem;
}

.gap1 {
    gap: 1rem;
}

.gap1_5 {
    gap: 1.5rem;
}