/* ============================
   🎓 WARNA DASAR (VARIABLES)
   ============================ */
:root {
    --primary: #0c2947;
    /* Biru tua elegan */
    --secondary: #f5b23c;
    /* Emas lembut */
    --background: #ffffff;
    /* Putih dasar */
    --surface: #fdfdfd;
    /* Putih lembut */
    --accent: #f5b23c;
    /* Warna aksen emas */
    --error: #f28b82;
    /* Merah muda lembut */

    /* 🌈 GRADIENT */
    --primary-gradient: linear-gradient(135deg, #0c2947 0%, #163b68 100%);
    --secondary-gradient: linear-gradient(135deg, #f5b23c 0%, #ffcf5c 100%);
    --surface-gradient: linear-gradient(135deg, #fdfdfd 0%, #fefefe 100%);
    --accent-gradient: linear-gradient(135deg, #f5b23c 0%, #f8d56c 100%);
    --error-gradient: linear-gradient(135deg, #f28b82 0%, #f65f5f 100%);
}

/* ============================
   🌆 LATAR & PERMUKAAN
   ============================ */
.bg-primary {
    background-color: var(--primary);
    color: #ffffff;
}

.bg-secondary {
    background-color: var(--secondary);
    color: #0c2947;
}

.bg-background {
    background-color: var(--background);
    color: #0c2947;
}

.bg-surface {
    background-color: var(--surface);
    color: #0c2947;
}

.bg-accent {
    background-color: var(--accent);
    color: #0c2947;
}

.bg-error {
    background-color: var(--error);
    color: #ffffff;
}

/* 🌈 GRADIENT LATAR */
.bg-primary-gradient {
    background: var(--primary-gradient);
    color: #ffffff;
}

.bg-secondary-gradient {
    background: var(--secondary-gradient);
    color: #0c2947;
}

.bg-surface-gradient {
    background: var(--surface-gradient);
    color: #0c2947;
}

.bg-accent-gradient {
    background: var(--accent-gradient);
    color: #0c2947;
}

.bg-error-gradient {
    background: var(--error-gradient);
    color: #ffffff;
}

/* ============================
   ✨ WARNA TEKS
   ============================ */
.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-accent {
    color: var(--accent);
}

.text-error {
    color: var(--error);
}

.text-dark {
    color: #0c2947;
}

.text-light {
    color: #fdfdfd;
}

.text-muted {
    color: #6b7280;
}

.text-background {
    color: var(--background);
}

.text-primary-black {
    color: #0c2947 !important;
}

.text-secondary-black {
    color: #6c757d !important;
}

.text-secondary-white {
    color: #ffffff;
}

.text-secondary-light {
    color: #f8f9fa;
}

/* TEKS GRADIENT */
.text-gradient-primary {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-secondary {
    background: var(--secondary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-accent {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================
   🧭 BORDER WARNA
   ============================ */
.border-primary {
    border-color: var(--primary);
}

.border-secondary {
    border-color: var(--secondary);
}

.border-accent {
    border-color: var(--accent);
}

.border-error {
    border-color: var(--error);
}

/* ============================
   💡 UTILITAS TAMBAHAN
   ============================ */
.hover-primary:hover {
    color: var(--primary);
}

.hover-secondary:hover {
    color: var(--secondary);
}

.hover-accent:hover {
    color: var(--accent);
}

.hover-error:hover {
    color: var(--error);
}

/* ============================
   🔘 CUSTOM BUTTON (SOLID)
   ============================ */

/* PRIMARY */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--primary-gradient) !important;
    border-color: #163b68 !important;
    color: #ffffff !important;
}

/* SECONDARY */
.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #0c2947 !important;
    transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--secondary-gradient) !important;
    border-color: #ffcf5c !important;
    color: #0c2947 !important;
}

/* ACCENT */
.btn-accent {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #0c2947 !important;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background: var(--accent-gradient) !important;
    border-color: #f8d56c !important;
    color: #0c2947 !important;
}

/* ERROR */
.btn-error {
    background-color: var(--error) !important;
    border-color: var(--error) !important;
    color: #ffffff !important;
}

.btn-error:hover {
    background: var(--error-gradient) !important;
    border-color: #f65f5f !important;
}

/* ============================
   ⚪ BUTTON OUTLINE
   ============================ */

/* PRIMARY OUTLINE */
.btn-outline-primary {
    background-color: transparent !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    border-color: #163b68 !important;
}

/* SECONDARY OUTLINE */
.btn-outline-secondary {
    background-color: transparent !important;
    border: 2px solid var(--secondary) !important;
    color: var(--secondary) !important;
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background: var(--secondary-gradient) !important;
    color: #0c2947 !important;
    border-color: #ffcf5c !important;
}

/* ACCENT OUTLINE */
.btn-outline-accent {
    background-color: transparent !important;
    border: 2px solid var(--accent) !important;
    color: var(--accent) !important;
    transition: all 0.3s ease;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus,
.btn-outline-accent:active {
    background: var(--accent-gradient) !important;
    color: #0c2947 !important;
    border-color: #f8d56c !important;
}

/* ERROR OUTLINE */
.btn-outline-error {
    background-color: transparent !important;
    border: 2px solid var(--error) !important;
    color: var(--error) !important;
    transition: all 0.3s ease;
}

.btn-outline-error:hover,
.btn-outline-error:focus,
.btn-outline-error:active {
    background: var(--error-gradient) !important;
    color: #ffffff !important;
    border-color: #f65f5f !important;
}

/* ========================================
   ✍️ TEXT CLASSES
======================================== */
.text-primary {
    color: var(--text-primary)!important;
}

.text-secondary {
    color: var(--text-secondary)!important;
}

.text-accent {
    color: var(--text-accent)!important;
}

.text-muted {
    color: var(--text-muted)!important;
}

.text-error {
    color: var(--text-error)!important;
}

.text-on-primary {
    color: var(--text-on-primary)!important;
}

.text-on-secondary {
    color: var(--text-on-secondary)!important;
}

/* ==========================================================
   🌆 LATAR (BG)
   ========================================================== */
.bg-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--text-on-secondary) !important;
}

.bg-background {
    background-color: var(--background) !important;
    color: var(--text-dark) !important;
}

.bg-surface {
    background-color: var(--surface) !important;
    color: var(--text-dark) !important;
}

.bg-accent {
    background-color: var(--accent) !important;
    color: var(--text-on-secondary) !important;
}

.bg-error {
    background-color: var(--error) !important;
    color: #fff !important;
}

/* 🌈 GRADIENT BACKGROUND */
.bg-primary-gradient {
    background: var(--primary-gradient) !important;
    color: #fff !important;
}

.bg-secondary-gradient {
    background: var(--secondary-gradient) !important;
    color: var(--text-on-secondary) !important;
}

.bg-surface-gradient {
    background: var(--surface-gradient) !important;
    color: var(--text-dark) !important;
}

.bg-accent-gradient {
    background: var(--accent-gradient) !important;
    color: var(--text-on-secondary) !important;
}

.bg-error-gradient {
    background: var(--error-gradient) !important;
    color: #fff !important;
}