/* ─── Brand ─────────────────────────────────────────────────── */
:root {
    /* Primary */
    --color-brand:              #000;
    --color-brand-hover:        #515151;
    --color-brand-focus-shadow: rgba(0, 0, 0, 0.15);
    --color-brand-subtle:       rgba(0, 0, 0, 0.08);

    /* Neutrals */
    --color-bg:                 #f5f5f7;
    --color-bg-hover:           #e8e8ed;
    --color-surface:            white;
    --color-text:               #1d1d1f;
    --color-border:             #e5e7eb;
    --color-scrollbar:          #d1d1d6;
    --color-nav-hover:          rgba(0, 0, 0, 0.04);
    --color-overlay:            rgba(0, 0, 0, 0.4);
}
/* ─────────────────────────────────────────────────────────────── */

* { -webkit-font-smoothing: antialiased; }

body { background: var(--color-bg); }

/* Spinner */
.spinner {
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Inputs */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-brand-focus-shadow);
    border-color: var(--color-brand);
}

/* Nav */
.nav-item { transition: all 0.15s ease; }
.nav-item:hover { background: var(--color-nav-hover); }
.nav-item.active { background: var(--color-brand-subtle); color: var(--color-brand); }

/* Buttons */
.btn-primary {
    background: var(--color-brand);
    color: var(--color-surface);
    transition: all 0.15s ease;
}
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-text);
    transition: all 0.15s ease;
}
.btn-secondary:hover { background: var(--color-bg-hover); }

/* Cards */
.card {
    background: var(--color-surface);
    border-radius: 12px;
}

/* Modal overlay */
.modal-overlay {
    background: var(--color-overlay);
    backdrop-filter: blur(4px);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 3px; }