@font-face {
    font-family: 'junction';
    src: url('/assets/fonts/junction-regular.woff') format('woff');
    font-weight: normal;
    font-display: block;
}

@font-face {
    font-family: 'junction';
    src: url('/assets/fonts/junction-bold.woff') format('woff');
    font-weight: bold;
    font-display: block;
}

@font-face {
    font-family: 'league';
    src: url('/assets/fonts/LeagueMono-Light.woff2') format('woff2');
    font-weight: normal;
    font-display: block;
}

@font-face {
    font-family: 'league';
    src: url('/assets/fonts/LeagueMono-Regular.woff2') format('woff2');
    font-weight: bold;
    font-display: block;
}

@font-face {
    font-family: 'league-gothic';
    src: url('/assets/fonts/LeagueGothic-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: block;
}

@font-face {
    font-family: 'league-gothic';
    src: url('/assets/fonts/LeagueGothic-Italic.woff2') format('woff2');
    font-style: italic;
    font-display: block;
}



:root {
    color-scheme: light dark;
    
    --font-body: 'junction', sans-serif;
    --font-heading: 'league', serif;
    --font-mono: 'league', monospace;

    --opacity-high: 0.87;
    --opacity-med: 0.60;
    --opacity-low: 0.20;
    --opacity-dis: 0.38;

    --font-xs: 0.5rem;
    --font-sm: 0.8rem;
    --font-md: 1rem;
    --font-lg: 1.2rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;
    --font-3xl: 3rem;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    --space-2xl: 96px;
    --space-3xl: 128px;

    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-xl: 48px;
    --radius-round: 50%;

    --page-width: 100vw;
    --min-box-width: calc(var(--page-width) * 0.05);
    --max-box-width: calc(var(--page-width) * 0.1);
    --hero-width: calc(var(--page-width) * 0.4);
    --body-width: calc(var(--page-width) * 0.35);
    --header-width: calc(var(--page-width) * 0.5);
}

/* Theme Colors */

:root.dark-theme {
    /* Base Colors */
    --bg-main: #0B0B09;
    --text-main: #e6e1d7;
    --text-muted: #B2B7A4;
    --accent: #F6AE2D;
    --contrast: #e6e1d7;

    /* Functional Variables */
    --text-link: var(--accent);
    --header-bg: #16161257;
    --header-text: var(--accent);
    --hero-bg: #1C1C18;
    --hero-text: var(--text-main);
    --footer-bg: #000000;
    --footer-text: var(--text-muted);
    --border-color: var(--contrast);

    /* Shadows */
    --shadow-main: 8px 8px 0px var(--contrast);
    --shadow-lite: 4px 4px 0px var(--contrast);
}

:root.light-theme {
    /* Base Colors */
    --bg-main: #e6e1d7;
    --text-main: #07080D;
    --text-muted: #4A4D3E;
    --accent: #F7B53B;
    --contrast: #07080D;

    /* Functional Variables */
    --header-bg: var(--accent);
    --header-text: var(--contrast);
    --hero-bg: var(--accent);
    --hero-text: var(--contrast);
    --footer-bg: #161612;
    --footer-text: #e6e1d7;
    --border-color: var(--contrast);

    /* Shadows */
    --shadow-main: 8px 8px 0px var(--contrast);
    --shadow-lite: 4px 4px 0px var(--contrast);
}