$exclude-from-layout: ".hero, .wrapper, .hamburguer-icon, .separator";

body, .app, #root {
    --bg: var(--background);
    --spacing: var(--md);
    --spacing-block: var(--md); /* Added variable for block spacing */
    --spacing-inline: var(--lg);
    --roundness: inherit;

    display: grid;
    place-items: center;
    min-height: var(--h-screen);
    //gap: var(--spacing); Testing for hero section
    background-color: var(--bg);

    //padding: calc(12vw - 1em);

    & > :where(nav, header, main, footer):not(.hero) {
        --bg: var(--background);
        background-color: var(--bg);
    }
    
    & :where(main > section, div):not(#{$exclude-from-layout}) {
        --bg: var(--secondary);
        background-color: var(--bg);
        margin-block: var(--spacing-block);
        padding: var(--spacing);
    }
    
    & :where(main > section > :is(section, div):not(#{$exclude-from-layout})) {
        --spacing: var(--md);
        margin-block: var(--spacing);
    }
    
    & * :where(:not(h1, p, span)) {
        --txt: var(--text);
        color: var(--txt);
        border-radius: var(--roundness);
    }
}

// Logo Styling

:where(a:not([role="img"])) {
    --txt-color: var(--accent);
    width: fit-content;
    height: fit-content;

    &:is(:visited, :link) {
        color: var(--txt-color);
    }
}

// Form Default Styling

:where(form) {
    --spacing: inherit;

    display: grid;
    place-items: center;
    justify-items: stretch;
    gap: var(--spacing);

    height: auto;
    width: var(--w-full);
}

// Default Behavior when focused by using the TAB key

:where(:focus-visible) {
    --outline: var(--outline-md);
    outline: var(--outline);
    outline-offset: var(--xs);
}

// Default Effect Behavior

:where(:is(button, summary, li):not(.disabled):active) {
    filter: var(--effect-bright);
}