@import url("components/modal.css");
@import url("components/sidebar.css");
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');

/* ===== Base Theme ===== */

:root {
    --bg: #0b0b0d;
    --panel: #111114;
    --text: #eaeaea;
    --muted: #9a9a9a;
    --gold: #c9a24a;
    --gold-soft: rgba(201, 162, 74, 0.25);
    --danger: #ff4d4d;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ===== Layout ===== */

.app-shell {
    display: flex;
    min-height: 100vh;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .main-content {
        padding-top: 3.5em;
    }
}

/* ===== Main content ===== */

.main-content {
    flex: 1;
    padding: 32px;
}

@media (max-width: 768px) {
    .main-content {
        padding: 64px 16px;
    }
}

/* ===== Page title ===== */

.page-title {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 500;
}