@import url('/global/tokens.css?v=0.2.3');
@import url('/global/footer.css');

/*
 * Pwnacles.systems global visual foundation.
 *
 * GLOBAL SCOPE:
 * - page canvas
 * - shared visual tokens
 * - rainy-city background
 * - viewport scrollbar geometry
 * - footer presentation
 *
 * Applications must not duplicate these rules.
 */

:root {
    color-scheme: dark;
    font-family: var(--pwn-font-family);
    font-size: var(--pwn-typography-sizes-body);
    font-weight: var(--pwn-typography-weights-regular);
    font-style: var(--pwn-typography-style);
    line-height: var(--pwn-line-height);
    letter-spacing: var(--pwn-letter-spacing);
    text-shadow: var(--pwn-text-effect);
}

html {
    min-height: 100%;
    background: var(--color-page);

    /*
     * Preserve viewport width when a page transitions
     * between requiring and not requiring vertical scroll.
     */
    scrollbar-gutter: stable;
}

body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--pwn-body-background);
    color: var(--color-text);
    font-family: var(--pwn-body-typography-family);
    font-style: var(--pwn-body-typography-style);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--pwn-typography-weights-heading);
}

/*
 * GLOBAL RAINY-CITY CANVAS
 *
 * Fixed to the viewport so document height and scrollbar
 * presence cannot change image scale or position.
 */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-color: var(--pwn-background-color);
    background-image:
        var(--pwn-background-gradient),
        var(--pwn-background-overlay),
        var(--site-background-image);

    background-size: var(--pwn-background-size);
    background-position: var(--pwn-background-position);
    background-repeat: no-repeat;
    opacity: var(--pwn-background-opacity);
}

/* The root page shades its header and footer over this single canvas. */
body.site-root::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--pwn-header-shade) 0 calc(var(--shell-header-height) - var(--pwn-header-shade-fade)), transparent var(--shell-header-height)),
        linear-gradient(to top, var(--pwn-footer-shade) 0 calc(var(--shell-footer-height) - var(--pwn-footer-shade-fade)), transparent var(--shell-footer-height));
}

body.site-root .identity-footer {
    z-index: 6;
    height: var(--shell-footer-height);
}