/* ============================================================
   BASE.CSS — CSS custom properties, reset, typography, nav
   Dark only. No light mode.
   ============================================================ */

:root {
    /* ── Surfaces ─────────────────────────────────────────────── */
    --body-bg:           #0a0a0a;
    --card-bg:           #111;
    --card-hover-bg:     #161616;
    --nav-bg:            #0d0d0d;
    --input-bg:          #0f0f0f;
    --input-focus-bg:    #141414;
    --modal-overlay:     rgba(0, 0, 0, 0.7);
    --editor-bg:         #0d0d0d;
    --editor-toolbar-bg: #111;

    /* ── Borders ──────────────────────────────────────────────── */
    --border-color:      #1e1e1e;
    --border-hover:      #2e2e2e;
    --input-border:      #222;
    --input-focus-border:#333;

    /* ── Text ─────────────────────────────────────────────────── */
    --primary-text:      #e0e0e0;
    --secondary-text:    #999;
    --muted-text:        #555;
    --placeholder:       #444;
    --link-color:        #aaa;

    /* ── Status ───────────────────────────────────────────────── */
    --color-success:     #16a34a;
    --color-success-dim: rgba(22, 163, 74, 0.12);
    --color-success-b:   rgba(22, 163, 74, 0.3);
    --color-danger:      #f87171;
    --color-danger-dim:  rgba(248, 113, 113, 0.1);
    --color-danger-b:    rgba(248, 113, 113, 0.25);
    --color-warning:     #fb923c;
    --color-warning-dim: rgba(251, 146, 60, 0.1);
    --color-warning-b:   rgba(251, 146, 60, 0.25);
    --color-accent:      #facc15;
    --color-info:        #6366f1;
    --color-info-dim:    rgba(99, 102, 241, 0.12);

    /* ── Geometry ─────────────────────────────────────────────── */
    --radius:        0px;
    --radius-sm:     0px;
    --nav-height:    52px;
    --container-w:   920px;
    --admin-w:       1100px;

    /* ── Typography ───────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Courier New', Courier, monospace;
    --font-journal: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

    /* ── Z-index ──────────────────────────────────────────────── */
    --z-nav:      100;
    --z-modal-bg: 1000;
    --z-modal:    1001;
    --z-toast:    2000;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--body-bg);
    color: var(--primary-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--body-bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
* { scrollbar-width: thin; scrollbar-color: #2a2a2a var(--body-bg); }

/* ── Selection ───────────────────────────────────────────────────── */
::selection { background: rgba(255,255,255,0.1); }

/* ── Links ───────────────────────────────────────────────────────── */
a { color: var(--link-color); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--primary-text); }

/* ── Typography ──────────────────────────────────────────────────── */
h1 { font-size: 1.75rem; font-weight: 200; color: var(--primary-text); }
h2 { font-size: 1.35rem; font-weight: 300; color: var(--primary-text); }
h3 { font-size: 1.1rem; font-weight: 400; color: var(--primary-text); }
h4 { font-size: 0.95rem; font-weight: 500; color: var(--secondary-text); }
p { margin-bottom: 0.75rem; }
p:last-child { margin-bottom: 0; }

/* ── Utilities ───────────────────────────────────────────────────── */
.container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container--wide {
    max-width: var(--admin-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.muted { color: var(--muted-text); }
.secondary { color: var(--secondary-text); }
.font-mono { font-family: var(--font-mono); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.d-flex      { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.is-hidden { display: none !important; }

/* ── Section label ───────────────────────────────────────────────── */
.section-label {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted-text);
}

/* ── Navigation ──────────────────────────────────────────────────── */
.topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: var(--z-nav);
}

.topnav-brand {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--primary-text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.topnav-brand:hover { color: var(--primary-text); }

.topnav-links {
    display: none;
    align-items: center;
    gap: 0.25rem;
}
@media (min-width: 641px) {
    .topnav-links { display: flex; }
}

.topnav-link {
    font-size: 0.85rem;
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--secondary-text);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    /* Reset browser button defaults when used on <button> elements */
    background: none;
    border: none;
    cursor: pointer;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
}
.topnav-link:hover {
    color: var(--primary-text);
    background: rgba(255,255,255,0.04);
}
.topnav-link.active {
    color: var(--primary-text);
    background: rgba(255,255,255,0.06);
}

/* ── Page layout ─────────────────────────────────────────────────── */
.page-main {
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 3rem;
    min-height: 100vh;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--primary-text);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.25rem;
}

.page-title-block {
    margin-bottom: 1.75rem;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.page-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.72rem;
    color: var(--muted-text);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.page-footer span {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-text);
}

/* ── Flash / alert banners ───────────────────────────────────────── */
.alert-banner {
    position: fixed;
    top: calc(var(--nav-height) + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    z-index: var(--z-toast);
    border: 1px solid;
    max-width: 480px;
    text-align: center;
    animation: slideDown 0.2s ease;
}
.alert-banner.success { background: var(--color-success-dim); border-color: var(--color-success-b); color: #4ade80; }
.alert-banner.error,
.alert-banner.danger   { background: var(--color-danger-dim); border-color: var(--color-danger-b); color: var(--color-danger); }
.alert-banner.warning  { background: var(--color-warning-dim); border-color: var(--color-warning-b); color: var(--color-warning); }
.alert-banner.info     { background: var(--color-info-dim); border-color: rgba(99,102,241,0.3); color: var(--color-info); }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown   { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes slideUp     { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes slideFromTop { from { opacity: 0; transform: translateY(-8px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.fade-in   { animation: fadeIn 0.2s ease; }
.slide-up  { animation: slideUp 0.2s ease; }

/* ── Hamburger button (hidden on desktop) ────────────────────────── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 44px;
    padding: 12px 10px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--secondary-text);
    border-radius: 0;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Nav — hamburger dropdown */
    .topnav { padding: 0 1rem; }
    .nav-hamburger { display: flex; }
    .topnav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: -1rem; right: -1rem;
        background: var(--nav-bg);
        flex-direction: column;
        padding: 0.5rem 0.75rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        z-index: var(--z-nav);
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }
    .topnav-links.is-open { display: flex; }
    .topnav-link {
        padding: 0.75rem 0.75rem;
        font-size: 0.9rem;
        border-radius: var(--radius);
        width: 100%;
        text-align: left;
    }
    /* Global layout */
    .container, .container--wide { padding: 0 0.875rem; }
    .page-main { padding-top: calc(var(--nav-height) + 1rem); padding-bottom: 2rem; }
    h1 { font-size: 1.35rem; }
    .topnav-brand { font-size: 0.95rem; }
    /* Alert banner — full width on mobile */
    .alert-banner {
        left: 0.75rem;
        right: 0.75rem;
        transform: none;
        max-width: none;
        text-align: left;
    }
    /* Footer — compact on mobile */
    .page-footer { padding: 0.875rem 1rem; font-size: 0.72rem; }
    /* Safe area inset for iPhone notch */
    .page-footer { padding-bottom: max(0.875rem, env(safe-area-inset-bottom)); }
}