:root {
    --head-nav-gap: 2.8rem;
    --h1-size: 4.6rem;
    --gap: 3.6rem;
    --header-spacing: 80px;
}

@media (max-width: 767px) {
    :root {
        --h1-size: 3.2rem !important;
        --gap: 2rem;
        --header-spacing: 48px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --io-color-border: rgba(247, 168, 0, 0.1);
        --io-color-gold-1: #14100C;
        --io-color-gold-2: #1D170F;
        --io-color-gold-3: #2E200B;
        --io-color-gold-4: #402600;
        --io-color-gold-5: #4D3000;
        --io-color-gold-6: #5B3E0D;
        --io-color-gold-7: #6F4F1D;
        --io-color-gold-8: #8E6526;
        --io-color-gold-9: #F7A800;
        --io-color-gold-10: #EC9D00;
        --io-color-gold-11: #FFBA4B;
        --io-color-gold-12: #FEE3BF;
        --io-background-color: #14100C;
    }
}