:root{

    /* Backgrounds */
    --bg-primary:#f7f5f2;
    --bg-secondary:#efebe4;
    --bg-tertiary:#e2dcd2;

    /* Text */
    --text-primary:#2b2825;
    --text-secondary:#6f6a62;
    --text-inverse:#ffffff;

    /* Brand */
    --color-primary:#6c594a;

    /* Accent */
    --accent-primary:#3a6ea5;
    --accent-secondary:#6b7280;
    --accent-hover:#2f5a87;

    /* Success */
    --success:#4f9c6c;
    --success-bg:#dff5e7;
    --success-light:rgba(79,156,108,.12);

    /* Warning */
    --warning:#d99a2b;
    --warning-bg:#fff6dc;
    --warning-light:rgba(217,154,43,.15);

    /* Danger */
    --danger:#c75450;
    --danger-bg:#fde8e7;
    --danger-light:rgba(199,84,80,.12);

    /* Info */
    --info:#3498db;
    --info-bg:#e9f4fd;

    /* Border */
    --border-color:#d6cdc1;

    /* Inputs */
    --input-field:#f5f5f5;

    /* Buttons */
    --btn-edit-bg:#e7f1ff;
    --btn-edit-border:#0d6efd;

    --btn-delete-bg:#f8d7da;
    --btn-delete-border:#dc3545;

    /* Badges */
    --badge-success:#2ecc71;
    --badge-warning:#f39c12;
    --badge-danger:#e74c3c;
    --badge-info:#3498db;

    /* Shadow */
    --shadow:rgba(43,40,37,.08);

}

[data-theme="dark"]{

    --bg-primary:#121212;
    --bg-secondary:#1e1e1e;
    --bg-tertiary:#2d2d2d;

    --text-primary:#f8f9fa;
    --text-secondary:#adb5bd;
    --text-inverse:#ffffff;

    --input-field:#2c2c2c;

    --border-color:#404040;

    --accent-primary:#3b82f6;
    --accent-hover:#60a5fa;

    --success:#22c55e;
    --success-bg:#14381f;
    --success-light:rgba(34,197,94,.15);

    --warning:#f59e0b;
    --warning-bg:#3f2d06;
    --warning-light:rgba(245,158,11,.15);

    --danger:#ef4444;
    --danger-bg:#431313;
    --danger-light:rgba(239,68,68,.15);

    --info:#60a5fa;
    --info-bg:#10253d;

    --btn-edit-bg:#12355d;
    --btn-edit-border:#3b82f6;

    --btn-delete-bg:#4a1818;
    --btn-delete-border:#ef4444;

    --badge-success:#22c55e;
    --badge-warning:#f59e0b;
    --badge-danger:#ef4444;
    --badge-info:#3b82f6;

    --shadow:rgba(0,0,0,.35);

}

body {
    font-family: Arial, sans-serif;
    background:var(--bg-primary);
    color:var(--text-primary);
}

.page-title {
    text-align: center;
    margin-bottom: 2rem;
}


/*======================
    Badge style
======================*/
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* Danger (red) */
.status-badge.danger {
    background:var(--badge-danger);
}

/* Warning (yellow/orange) */
.status-badge.warning {
    background:var(--badge-warning);
}

/* Safe (green) */
.status-badge.success {
    background:var(--badge-success);
}

/* Info (blue) */
.status-badge.info {
    background:var(--badge-info);
}