/* ============================================================
   THEME UTILITIES — Membership Valiving Club
   Variabel warna & font di-inject oleh components/head.php
   dari konstanta config/config.php — jangan ubah :root di sini.
   
   5 Color Variables: --color-primary, --color-secondary, --color-accent, --color-success, --color-danger
   3 Font Variables: --font-primary, --font-secondary, --font-mono
   ============================================================ */

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

body {
    font-family: var(--font-primary);
    color: #1e293b;
    background: var(--color-bg);
    line-height: 1.6;
}

/* ── Tipografi ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 700;
    line-height: 1.25;
}

code, pre, .font-mono {
    font-family: var(--font-mono);
}

/* ── Utility warna teks ──────────────────────────────────── */
.text-primary   { color: var(--color-primary);   }
.text-secondary { color: var(--color-secondary); }
.text-accent    { color: var(--color-accent);    }
.text-success   { color: var(--color-success);   }
.text-danger    { color: var(--color-danger);    }

/* ── Utility warna latar ─────────────────────────────────── */
.bg-primary   { background-color: var(--color-primary);   }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent    { background-color: var(--color-accent);    }
.bg-success   { background-color: var(--color-success);   }
.bg-danger    { background-color: var(--color-danger);    }
.bg-primary-light   { background-color: var(--color-primary-light);   }
.bg-secondary-light { background-color: var(--color-secondary-light); }
.bg-accent-light    { background-color: var(--color-accent-light);    }
.bg-success-light   { background-color: var(--color-success-light);   }
.bg-danger-light    { background-color: var(--color-danger-light);    }

/* ── Tombol ───────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    text-decoration: none;
}
.btn-primary:hover    { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn-primary:active   { transform: translateY(0); }
.btn-primary:disabled,
.btn-primary[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    background: var(--color-primary);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    background: var(--color-secondary);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    text-decoration: none;
}
.btn-secondary:hover { background: var(--color-secondary-hover); transform: translateY(-1px); }
.btn-secondary:disabled,
.btn-secondary[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    background: var(--color-secondary);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: .5rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.btn-outline:hover { background: var(--color-primary-light); }
.btn-outline:disabled,
.btn-outline[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    background: transparent;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    background: var(--color-danger);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    text-decoration: none;
}
.btn-danger:hover { background: var(--color-danger-hover); transform: translateY(-1px); }

/* ── Card ─────────────────────────────────────────────────── */
.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

/* ── Form input ───────────────────────────────────────────── */
.form-input {
    width: 100%;
    padding: .65rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: .5rem;
    font-family: var(--font-primary);
    font-size: .9rem;
    background: #fff;
    color: #1e293b;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}
.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ── Badge with 5 color support ──────────────────────────── */
.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.badge-accent    { background: var(--color-accent-light);    color: var(--color-accent);    }
.badge-secondary { background: var(--color-secondary-light); color: var(--color-secondary); }
.badge-success   { background: var(--color-success-light);   color: var(--color-success);   }
.badge-danger    { background: var(--color-danger-light);    color: var(--color-danger);    }

/* ── Alert with 5 color support ──────────────────────────── */
.alert { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: .5rem; font-size: .875rem; }
.alert-success  { background: var(--color-success-light); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); color: var(--color-success); }
.alert-danger   { background: var(--color-danger-light);  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);  color: var(--color-danger); }
.alert-warning  { background: #fef9c3; border: 1px solid #fde68a; color: #92400e; }
.alert-info     { background: var(--color-accent-light);  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);  color: var(--color-accent); }

/* ── Table ────────────────────────────────────────────────── */
.table-base { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-base th { background: #f8fafc; padding: .75rem 1rem; text-align: left; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0; }
.table-base td { padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; color: #334155; }
.table-base tr:hover td { background: #f8fafc; }

/* ── Gradient utilities ───────────────────────────────────── */
.grad-primary-secondary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.grad-primary-accent {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
.grad-accent-primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}