:root {
    --gold: #D4A574;
    --gold-dark: #B88A54;
    --gold-light: #E8C9A0;
    --cream: #FBF9F5;
    --cream-dark: #F5F1E8;
    --charcoal: #2A2A2A;
    --charcoal-light: #3F3F3F;
    --white: #FFFFFF;
    --border: #E8E1D5;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
    min-height: 100vh;
}

/* ── Navbar ── */
.navbar {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid var(--gold-dark);
}
.navbar-brand { font-weight: 700; color: var(--charcoal) !important; letter-spacing: 0.5px; }
.nav-link { color: var(--charcoal) !important; font-weight: 500; transition: all 0.3s; }
.nav-link:hover { color: var(--charcoal-light) !important; background: rgba(42,42,42,0.1); border-radius: 8px; }
.dropdown-menu { border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 10px; }

/* ── Cards ── */
.card {
    border: 2px solid var(--gold);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    background: var(--white);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }
.card-header { border-radius: 18px 18px 0 0 !important; border-bottom: 2px solid var(--border); font-weight: 600; }

/* Reusable card header styles */
.card-header-dark  { background-color: var(--charcoal); color: white; }
.card-header-gold  { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%); color: var(--charcoal) !important; }
.card-header-gold h5 { color: var(--charcoal); }

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    border: none; color: var(--charcoal); font-weight: 700;
    padding: 10px 24px; border-radius: 25px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3);
}
.btn-primary:hover {
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212, 165, 116, 0.5);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--charcoal);
}
.btn-primary:active { transform: translateY(0); }

.btn-danger   { background: #dc3545; border: none; color: white; font-weight: 600; border-radius: 20px; transition: all 0.2s; }
.btn-danger:hover { background: #c82333; transform: translateY(-2px); }

.btn-secondary { background: var(--charcoal-light); border: none; color: white; font-weight: 600; border-radius: 20px; }
.btn-secondary:hover { background: var(--charcoal); }

/* ── Badges ── */
.badge-view { background-color: var(--gold-light); color: var(--charcoal); font-weight: 600; }
.badge-edit { background-color: var(--gold);       color: var(--charcoal); font-weight: 600; }

/* ── Alerts ── */
.alert { border-radius: 15px; border: 2px solid; font-weight: 500; }
.alert-success { background: #d4edda; border-color: #c3e6cb; color: #155724; }
.alert-danger  { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.alert-info    { background: var(--cream); border-color: var(--gold); color: var(--charcoal); }

/* ── Layout ── */
.main-container { min-height: calc(100vh - 80px); padding: 2rem 0; }

/* ── Forms ── */
.form-control, .form-select {
    border: 2px solid var(--gold); border-radius: 12px;
    background: var(--cream); transition: all 0.3s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold-dark);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
    background: var(--white);
}
.input-group-text {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    border: 2px solid var(--gold); border-right: none; color: var(--charcoal);
}

/* ── Tables ── */
.table { background: var(--white); border-radius: 15px; overflow: hidden; }
.table thead { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%); color: var(--charcoal); }
.table-hover tbody tr:hover { background: var(--cream); }

.bi { vertical-align: -0.125em; }

/* ── Utilities ── */
.text-charcoal { color: var(--charcoal); }
.text-gold     { color: var(--gold); }
.card-admin    { border-color: var(--gold-dark) !important; }