/* ============================================================
   Laytik — App entry CSS (mobile-first design system v2)
   ============================================================
   Loading order matters. @layer ensures predictable cascade
   regardless of file declaration order.
   ============================================================ */

@layer tokens, reset, base, layout, components, utilities, theme, overrides;

@import url("./tokens-colors.css")      layer(tokens);
@import url("./tokens.css")             layer(tokens);
@import url("./reset.css")              layer(reset);
@import url("./base.css")               layer(base);
@import url("./layout.css")             layer(layout);

/* Components (alphabetical for predictability — order doesn't matter inside @layer) */
@import url("./components/app-shell.css")  layer(layout);
@import url("./components/badge.css")     layer(components);
@import url("./components/bottom-nav.css") layer(components);
@import url("./components/button.css")     layer(components);
@import url("./components/card.css")       layer(components);
@import url("./components/chip.css")       layer(components);
@import url("./components/drawer.css")     layer(components);
@import url("./components/form.css")       layer(components);
@import url("./components/header.css")     layer(components);
@import url("./components/modal.css")      layer(components);
@import url("./components/offline.css")    layer(components);
@import url("./components/skeleton.css")   layer(components);
@import url("./components/table.css")      layer(components);
@import url("./components/toast.css")      layer(components);

@import url("./utilities.css")             layer(utilities);
@import url("./utilities-responsive.css")  layer(utilities);
@import url("./motion.css")                layer(components);
@import url("./dark-mode.css")             layer(theme);
@import url("./print.css")                 layer(theme);

/*
 * v2-shell-fixes: unlayered (no @layer wrapper) so these rules beat every
 * @layer rule AND the legacy style.css / mobile-first.css bare element
 * selectors (which are also unlayered, but lower specificity).
 * Specificity 0-1-1 (class + element) beats legacy 0-0-1 (element only).
 */
main.app-shell__main {
    padding-block: var(--space-4, 16px);
    padding-inline: 0;
    overflow-x: visible;
}
.app-shell.has-bottom-nav > main.app-shell__main {
    padding-bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom) + var(--space-4, 16px));
}
@media (min-width: 1024px) {
    .app-shell.has-bottom-nav > main.app-shell__main {
        padding-bottom: var(--space-6, 24px);
    }
}
header.app-header {
    background: var(--surface-header, color-mix(in oklch, var(--surface-elevated) 94%, transparent));
    border-bottom: 1px solid var(--border-subtle);
    padding: 0;
    position: sticky;
    top: 0;
    box-shadow: none;
    backdrop-filter: blur(12px);
    will-change: auto;
    z-index: var(--z-header, 200);
}
footer.app-footer {
    background: var(--surface-footer, var(--color-gray-50));
    border-top: 1px solid var(--border-subtle);
    padding: 0;
    margin-top: 0;
    font-size: inherit;
    color: inherit;
    text-align: inherit;
}