/* ── StoreMap design tokens — PAK'nSAVE livery (yellow / black / red) ── */

:root {
    /* Brand ramp */
    --yellow: hsl(50, 100%, 50%);
    --yellow-dk: hsl(45, 100%, 45%);
    --red: hsl(353, 78%, 47%);
    --red-dk: hsl(353, 80%, 38%);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    --mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

    --pak: #F4D532;

}

/* Light theme */
[data-theme="light"] {
    --bg-base: hsl(48, 30%, 96%);
    --bg-surface: hsl(0, 0%, 100%);
    --bg-subtle: hsl(48, 38%, 93%);
    --bg-overlay: hsl(48, 30%, 88%);
    --border: hsl(45, 20%, 82%);
    --border-strong: hsl(45, 18%, 70%);

    --text-primary: hsl(40, 12%, 12%);
    --text-secondary: hsl(40, 8%, 32%);
    --text-muted: hsl(42, 8%, 52%);

    --primary: var(--yellow);
    --primary-ink: hsl(40, 100%, 18%);
    --accent: var(--red);

    /* Map */
    --map-floor: hsl(48, 35%, 97%);
    --dept-fill: hsl(48, 70%, 88%);
    --dept-stroke: hsl(45, 55%, 62%);
    --aisle-fill: hsl(0, 0%, 100%);
    --aisle-stroke: hsl(45, 20%, 72%);
    --fixture-fill: hsl(45, 12%, 88%);
    --fixture-stroke: hsl(45, 14%, 75%);
    --highlight: var(--red);
}

/* Dark theme */
[data-theme="dark"] {
    --bg-base: hsl(40, 8%, 8%);
    --bg-surface: hsl(40, 7%, 13%);
    --bg-subtle: hsl(40, 7%, 18%);
    --bg-overlay: hsl(40, 7%, 24%);
    --border: hsl(42, 8%, 26%);
    --border-strong: hsl(42, 8%, 38%);

    --text-primary: hsl(48, 30%, 96%);
    --text-secondary: hsl(45, 12%, 76%);
    --text-muted: hsl(44, 9%, 56%);

    --primary: var(--yellow);
    --primary-ink: hsl(40, 100%, 14%);
    --accent: hsl(353, 85%, 60%);

    /* Map */
    --map-floor: hsl(40, 7%, 11%);
    --dept-fill: hsl(45, 35%, 22%);
    --dept-stroke: hsl(45, 40%, 38%);
    --aisle-fill: hsl(40, 6%, 17%);
    --aisle-stroke: hsl(42, 8%, 30%);
    --fixture-fill: hsl(40, 6%, 15%);
    --fixture-stroke: hsl(42, 8%, 26%);
    --highlight: hsl(353, 90%, 62%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    src: url(/fonts/AkzidenzGroteskBE-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-family: AkzidenzGrotesk
}

@font-face {
    src: url(/fonts/AkzidenzGroteskBE-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    font-family: AkzidenzGrotesk
}

@font-face {
    src: url(/fonts/AkzidenzGroteskBE-XBdCn.woff2) format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    font-stretch: condensed;
    font-family: AkzidenzGrotesk
}

@font-face {
    src: url(/fonts/SaveySans-Regular.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-family: SaveySans
}

@font-face {
    src: url(/fonts/SaveySans-Medium.otf) format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-family: SaveySans
}

@font-face {
    src: url(/fonts/SaveySans-Bold.otf) format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    font-family: SaveySans
}

@font-face {
    src: url(/fonts/SaveySans-RegularCondensed.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-stretch: condensed;
    font-family: SaveySans
}

@font-face {
    src: url(/fonts/SaveySans-MediumCondensed.otf) format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-stretch: condensed;
    font-family: SaveySans
}

@font-face {
    src: url(/fonts/SaveySans-BoldCondensed.otf) format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    font-stretch: condensed;
    font-family: SaveySans
}

@font-face {
    src: url(/fonts/SaveySans-BlackCondensed.otf) format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    font-stretch: condensed;
    font-family: SaveySans
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: AkzidenzGrotesk, system-ui, -apple-system, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header ── */
header {
    background-color: var(--pak);
    padding: 2rem 16px 2rem 18px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 0 var(--border);
    flex-shrink: 0;
    z-index: 2000;
    position: relative;
}

.logo {
    text-decoration: none;
    flex-shrink: 0;
}

.store-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: black;
    flex: 1;
}

.theme-toggle {
    margin-left: auto;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    padding: 6px 12px;
    font-size: 1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s;
}

.theme-toggle:hover {
    background: var(--bg-overlay);
    border-color: var(--border-strong);
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: inline;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
    display: inline;
}

[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

/* ── Main ── */
main {
    flex: 1;
    min-height: 0;
    position: relative;
}

.btn {
    display: inline-block;
    background: var(--yellow);
    color: hsl(40, 12%, 12%);
    font-weight: 700;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 2px solid hsl(40, 12%, 12%);
    transition: transform 0.1s;
}

.btn:hover {
    transform: translateY(-1px);
}