/*
Theme Name: Fyrware
Theme URI: https://fyrware.com
Author: Fyrware LLC
Author URI: https://fyrware.com
Description: Official theme for fyrware.com - technology and digital services company.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.3
Version: 1.0.0
Text Domain: fyrware
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

:root {
    --fyr-color-black: #040609;
    --fyr-color-white: #FFFFFF;
    --fyr-color-neutral: #bfc8e4;

    --fyr-color-neutral-3d-red: #ffadcf;
    --fyr-color-neutral-3d-blue: #9ce5ff;

    --fyr-color-primary: #0055FF;
    --fyr-color-secondary: #fed000;
    --fyr-color-tertiary: #12cd5a;
    --fyr-color-quaternary: #e95151;

    --fyr-color-neutral-alt: rgba(191, 200, 228, 0.66);
    --fyr-color-primary-alt: #1b69ff;
    --fyr-color-primary-glow: rgba(0, 85, 255, 0.175);
    --fyr-color-secondary-alt: #ffdb48;
    --fyr-color-secondary-glow: rgba(254, 208, 0, 0.175);

    --fyr-color-neutral-input: rgba(182, 191, 220, 0.33);

    --fyr-font-regular: "nimbus-sans", sans-serif;
    --fyr-font-heading: "nimbus-sans", sans-serif;
    --fyr-font-special: "corsario-variable", serif;
    --fyr-font-special-variation: "opsz" 48, "wght" 700;
    --fyr-font-special-variation-black: "opsz" 48, "wght" 800;
}

html {
    background-color: var(--fyr-color-black);

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100dvh;
        margin: 0;
        overflow: auto;
        font-family: var(--fyr-font-regular);

        &::before {
            content: '';
            display: block;
            width: 100vw;
            height: 125dvh;
            background: radial-gradient(ellipse farthest-side at top left, var(--fyr-color-primary), var(--fyr-color-black));
            background-size: 133% 100%;
            background-repeat: no-repeat;
            position: fixed;
            inset: 0;
            z-index: -3;
            opacity: 0.225;
        }

        main {
            flex-grow: 1;
            width: 100%;
            min-height: 25dvh;
            overflow-x: clip;

            aside.application-loader {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100vw;
                height: 100vh;
                margin-top: -100px;
                margin-bottom: 25dvh;

                img {
                    width: 120px;
                    height: 120px;
                }
            }

            section.main-content {
                width: 100%;
                min-height: 25dvh;
                opacity: 1;
                transition: opacity 167ms ease;

                &.outgoing {
                    opacity: 0;
                }
            }
        }

        *.max-width {
            width: 100%;
            max-width: 1280px;
            padding-left: 80px;
            padding-right: 80px;
        }

        *.flex {
            display: flex;

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

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

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

            &.justify-space-around {
                justify-content: space-around;
            }

            &.justify-space-evenly {
                justify-content: space-evenly;
            }

            &.align-start {
                align-items: flex-start;
            }

            &.align-end {
                align-items: flex-end;
            }

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

            &.align-stretch {
                align-items: stretch;
            }
        }

        *.flex-grow {
            flex-grow: 1;
        }

        *.flex-shrink {
            flex-shrink: 1;
        }

        *.inherit-color {
            color: inherit !important;
        }

        [hidden] {
            display: none !important;
        }
    }
}