/* ==========================================================
   HOMESTEAD
   Framework
   v0.01
   ========================================================== */


/* ==========================================================
   Reset
   ========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--hs-background);
    color: var(--hs-text);
}

/* ==========================================================
   Hidden Elements
   ========================================================== */

[hidden] {
    display: none !important;
}

/* ==========================================================
   Application Shell
   ========================================================== */

.hsShell {
    min-height: 100dvh;

    display: grid;

    grid-template-rows:
        var(--hs-header-height) minmax(0, 1fr) var(--hs-nav-height);
}


/* ==========================================================
   Header
   ========================================================== */

.hsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 var(--hs-space-4);

    background: var(--hs-primary);
    color: var(--hs-text-on-primary);
}


/* ==========================================================
   Main View
   ========================================================== */

.hsView {
    width: 100%;
    max-width: var(--hs-content-max);

    margin: 0 auto;
    padding: var(--hs-space-5) var(--hs-space-4);

    overflow-y: auto;
}


/* ==========================================================
   Stack
   ========================================================== */

.hsStack {
    display: flex;
    flex-direction: column;
    gap: var(--hs-space-4);
}


/* ==========================================================
   Card
   ========================================================== */

.hsCard {
    padding: var(--hs-space-4);

    background: var(--hs-surface);

    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
}


/* ==========================================================
   Buttons
   ========================================================== */

.hsButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 var(--hs-space-4);

    border: 0;
    border-radius: var(--hs-radius-sm);

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.hsButtonPrimary {
    background: var(--hs-primary);
    color: var(--hs-text-on-primary);
}

.hsButtonAccent {
    background: var(--hs-accent);
    color: var(--hs-text);
}


/* ==========================================================
   Badge
   ========================================================== */

.hsBadge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding:
        var(--hs-space-1) var(--hs-space-2);

    border-radius: 999px;

    background: var(--hs-surface-soft);

    font-size: 0.75rem;
    font-weight: 600;
}


/* ==========================================================
   Bottom Navigation
   ========================================================== */

.hsNav {
    display: flex;
    align-items: center;
    justify-content: space-around;

    background: var(--hs-surface);

    border-top: 1px solid var(--hs-border);
}

.hsNavItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 64px;
    min-height: 44px;

    color: var(--hs-text-muted);
    text-decoration: none;

    font-size: 0.75rem;
    font-weight: 600;
}

.hsNavItem.isActive {
    color: var(--hs-primary);
}