@layer base, tokens, layout, components, content, themes, vendor;

/* Unlayered - beats all layered rules regardless of order */
.hidden { display: none; }

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    a { color: inherit; text-decoration: inherit; }
    button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; }
    button { background-color: transparent; background-image: none; border: 0; cursor: pointer; }
    img, svg, video { display: block; max-width: 100%; }

    body {
        font-family: var(--font-body);
        color: #b9a581;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background: #1d1309 url("backgrounds/main.jpg") 40% 170% no-repeat fixed;
        min-height: 100vh;
    }

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

    /* Standard headers for clean content */
    h1:not(.page-title),
    h2:not(.page-title),
    h3,
    h4 {
        font-family: var(--font-heading);
        color: #f0d8aa;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        background: none !important;
    }
}