:root {
    --ink: #2e1f19;
    --paper: #fff1e6;
    --panel-paper: #fffaf4;
    --border: #cf6a3d;
    --muted: #7a5947;
    --accent-soft: #ffd7bb;
    --price: #a2481e;
    --title-color: #ad4a21;
    --subtitle-color: #cf6a3d;
    --frame-bg: linear-gradient(180deg, #fffdf8 0%, #ffefd9 100%);
    --panel-bg: var(--panel-paper);
    --panel-shadow: none;
    --panel-title-bg: linear-gradient(180deg, #ffe0c0 0%, #ffc790 100%);
    --panel-title-color: #9c3f1a;
    --panel-title-border: var(--border);
    --panel-title-shadow: none;
    --frame-shadow: 0 0 0 4px var(--accent-soft);
}

body {
    color: var(--ink);
    font-family: "Atkinson Hyperlegible", "Inter", "Source Sans 3", "Roboto", sans-serif;
    overflow-x: hidden;
    background: var(--body-bg, linear-gradient(160deg, #fffaf5 0%, var(--paper) 45%, #ffd9bf 100%));
}

.title {
    color: var(--title-color);
}

.subtitle {
    color: var(--subtitle-color);
}

.frame {
    border-color: var(--border);
    background: var(--frame-bg);
    box-shadow: var(--frame-shadow);
}

.panel {
    border-color: var(--border);
    background: var(--panel-bg);
    box-shadow: var(--panel-shadow);
}

.panel-title {
    color: var(--panel-title-color);
    background: var(--panel-title-bg);
    border-color: var(--panel-title-border);
    box-shadow: var(--panel-title-shadow);
}

.item-desc {
    color: var(--muted);
}

.price {
    color: var(--price);
}

/* 
body.theme-summer {
    --ink: #1e1f19;
    --paper: #fff7e6;
    --panel-paper: rgba(255, 248, 230, 0.88);
    --border: #c16424;
    --muted: #6c5a46;
    --accent-soft: #ffd7a7;
    --price: #8a2e00;
    --title-color: #7d3305;
    --subtitle-color: #a94712;
    --frame-bg: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
    --panel-bg: linear-gradient(180deg, rgba(255, 249, 234, 0.9) 0%, rgba(255, 238, 204, 0.82) 100%);
    --panel-shadow: 0 10px 20px rgba(140, 63, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --panel-title-bg: linear-gradient(180deg, #fff0d2 0%, #ffd08f 100%);
    --panel-title-color: #6d2800;
    --panel-title-border: var(--border);
    --panel-title-shadow: 0 4px 10px rgba(117, 50, 6, 0.2);
    --frame-shadow: 0 0 0 4px var(--accent-soft);
    background-color: #ffaa00;
    background-image: url("../1/bg.svg");
    background-attachment: fixed;
    background-size: cover;
}

body.theme-night {
    --ink: #eef5ff;
    --paper: #fff4e5;
    --panel-paper: rgba(10, 24, 46, 0.12);
    --border: rgba(178, 217, 255, 0.42);
    --muted: #c6d9f3;
    --accent-soft: rgba(195, 225, 255, 0.25);
    --price: #ffe7a8;
    --title-color: #e9f3ff;
    --subtitle-color: #d1e6ff;
    --frame-bg: transparent;
    --panel-bg: var(--panel-paper);
    --panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    --panel-title-bg: linear-gradient(180deg, rgba(124, 171, 225, 0.4) 0%, rgba(62, 103, 155, 0.55) 100%);
    --panel-title-color: #edf5ff;
    --panel-title-border: rgba(194, 224, 255, 0.65);
    --panel-title-shadow: none;
    --frame-shadow: none;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

body.theme-bread {
    --ink: #2e1f19;
    --paper: #fff1e6;
    --panel-paper: #fffaf4;
    --border: #cf6a3d;
    --muted: #7a5947;
    --accent-soft: #ffd7bb;
    --price: #a2481e;
    --title-color: #ad4a21;
    --subtitle-color: #cf6a3d;
    --frame-bg: linear-gradient(180deg, #fffdf8 0%, #ffefd9 100%);
    --panel-bg: var(--panel-paper);
    --panel-shadow: none;
    --panel-title-bg: linear-gradient(180deg, #ffe0c0 0%, #ffc790 100%);
    --panel-title-color: #9c3f1a;
    --panel-title-border: var(--border);
    --panel-title-shadow: none;
    --frame-shadow: 0 0 0 4px var(--accent-soft);
    background: linear-gradient(160deg, #fffaf5 0%, var(--paper) 45%, #ffd9bf 100%);
}

body.theme-summer #app,
body.theme-summer .frame,
body.theme-summer .page,
body.theme-night #app,
body.theme-night .frame,
body.theme-night .page {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.theme-night::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8) 45%, transparent 50%),
        radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.7) 45%, transparent 50%),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.75) 45%, transparent 50%),
        radial-gradient(1px 1px at 85% 65%, rgba(255, 255, 255, 0.65) 45%, transparent 50%);
    background-size: 320px 320px, 260px 260px, 360px 360px, 300px 300px;
    opacity: 0.6;
} */