/* ==========================================================================
   TOPPERWORK - GLOBAL BASE
   ==========================================================================
   Phase: 1

   Purpose:
   - Global HTML and body foundation
   - Application background system
   - Global text rendering
   - Main application structure
   - Surface foundation
   - Modern gradient background effect
   - Mobile-first and WebView-safe

   Important:
   - Page-specific styles do not belong here
   - Component-specific styles do not belong here
   ========================================================================== */


/* ==========================================================================
   1. HTML FOUNDATION
   ========================================================================== */

html {
    min-height: 100%;

    background:
        var(--color-page-bg);

    color-scheme:
        dark;

    -webkit-text-size-adjust:
        100%;

    text-size-adjust:
        100%;

    scroll-behavior:
        smooth;

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   2. BODY FOUNDATION
   ========================================================================== */

body {
    position: relative;

    min-width: 320px;

    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background:
        var(--color-page-bg);

    color:
        var(--color-text);

    font-family:
        var(--font-family-base);

    font-size:
        var(--font-size-base);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-base);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   3. GLOBAL APPLICATION BACKGROUND
   ========================================================================== */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 20%,
            var(--color-glow-primary),
            transparent 45%
        ),
        radial-gradient(
            circle at 80% 30%,
            var(--color-glow-accent),
            transparent 45%
        ),
        radial-gradient(
            circle at 50% 80%,
            var(--color-glow-primary-soft),
            transparent 50%
        );
}


/* ==========================================================================
   4. GLOBAL BACKGROUND LAYER
   ========================================================================== */

body::after {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            var(--color-page-gradient-start) 0%,
            var(--color-page-bg) 38%,
            var(--color-page-bg) 100%
        );
}


/* ==========================================================================
   5. ROOT APPLICATION CONTAINER
   ========================================================================== */

#app,
.topperwork-app {
    position: relative;

    z-index:
        var(--z-header);

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    isolation:
        isolate;
}


/* ==========================================================================
   6. MAIN APPLICATION AREA
   ========================================================================== */

main,
.topperwork-main {
    position: relative;

    flex: 1 0 auto;

    min-width: 0;
}


/* ==========================================================================
   7. GLOBAL SURFACE FOUNDATION
   ========================================================================== */

.topperwork-surface {
    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-md);
}


/* ==========================================================================
   8. SECONDARY SURFACE FOUNDATION
   ========================================================================== */

.topperwork-surface-secondary {
    background:
        var(--color-surface-secondary);

    border:
        1px solid
        var(--color-border);
}


/* ==========================================================================
   9. GLOBAL CONTENT CONTAINER
   ========================================================================== */

.topperwork-container {
    width: 100%;

    max-width:
        var(--container-max-width);

    margin-right:
        auto;

    margin-left:
        auto;

    padding-right:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    padding-left:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );
}


/* ==========================================================================
   10. WIDE CONTENT CONTAINER
   ========================================================================== */

.topperwork-container-wide {
    width: 100%;

    max-width:
        var(--container-wide-max-width);

    margin-right:
        auto;

    margin-left:
        auto;

    padding-right:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    padding-left:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );
}


/* ==========================================================================
   11. TEXT SELECTION
   ========================================================================== */

::selection {
    background:
        var(--color-selection-bg);

    color:
        var(--color-selection-text);
}


::-moz-selection {
    background:
        var(--color-selection-bg);

    color:
        var(--color-selection-text);
}


/* ==========================================================================
   12. ACCESSIBILITY - SKIP LINK
   ========================================================================== */

.skip-link {
    position: fixed;

    top:
        calc(
            var(--safe-area-top)
            + var(--space-3)
        );

    left:
        calc(
            var(--safe-area-left)
            + var(--space-3)
        );

    z-index:
        var(--z-critical);

    padding:
        var(--space-3)
        var(--space-4);

    border-radius:
        var(--radius-md);

    background:
        var(--color-primary);

    color:
        var(--color-primary-contrast);

    font-weight:
        var(--font-weight-semibold);

    text-decoration:
        none;

    transform:
        translateY(-150%);

    transition:
        transform
        var(--transition-normal);
}


.skip-link:focus {
    transform:
        translateY(0);
}


/* ==========================================================================
   13. TABLET FOUNDATION
   ========================================================================== */

@media (
    min-width: 641px
) {

    .topperwork-container,
    .topperwork-container-wide {
        padding-right:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            );

        padding-left:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            );
    }

}


/* ==========================================================================
   14. DESKTOP FOUNDATION
   ========================================================================== */

@media (
    min-width: 900px
) {

    .topperwork-container,
    .topperwork-container-wide {
        padding-right:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

        padding-left:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            );
    }

}


/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior:
            auto;
    }


    .skip-link {
        transition:
            none;
    }

}