/* ======================
   DEFAULT PUBLIC THEME
====================== */
:root {
	/* COLOR */
	--primary: #2563eb;
	--secondary: #3b82f6;

	/* ARTICLE HERO */
	--theme-hero-start: #f8fafc;
	--theme-hero-end: #eef2ff;

	--theme-hero-text: #111827;
	--theme-hero-subtext: #64748b;

	/* GLOBAL */
	--body-bg: #ffffff;
	--text-color: #111827;
	--card-bg: #ffffff;
}

/* ======================
   BODY
====================== */
body {
	background: var(--body-bg);
	color: var(--text-color);
}

/* ======================
   NAVBAR
====================== */
.navbar {
	background: #fff !important;

	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar-brand,
.nav-link {
	color: #111827 !important;
}

.nav-link:hover {
	color: var(--primary) !important;
}

/* ======================
   HERO (HOME)
====================== */
.hero-section {
	background: linear-gradient(135deg, #f8fafc, #eef2ff) !important;
}

/* HOME HERO TEXT */
.hero-section h1 {
	color: #111827 !important;
	font-weight: 800;
}

.hero-section p {
	color: #64748b !important;
}

/* ======================
   ARTICLE HERO
====================== */
.article-hero .hero-title {
	color: var(--theme-hero-text) !important;
}

.article-hero .hero-subtitle {
	color: var(--theme-hero-subtext) !important;
}

/* badge & meta */
.article-hero .hero-badge,
.article-hero .hero-meta span {
	background: rgba(255, 255, 255, 0.65);

	color: #111827 !important;

	backdrop-filter: blur(10px);

	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* ======================
   CONTENT CURVE
====================== */
.content-section {
	background: var(--card-bg) !important;
}

/* ======================
   CARD
====================== */
.card,
.article-card,
.sidebar-card,
.blog-card {
	background: var(--card-bg) !important;

	border: none;

	border-radius: 18px;

	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* ======================
   BUTTON
====================== */
.btn-primary {
	background: var(--primary) !important;

	border: none;
}

.btn-outline-primary {
	border: 1px solid var(--primary) !important;

	color: var(--primary) !important;
}

/* ======================
   INPUT
====================== */
.form-control {
	border: 1px solid #dbeafe;
}

/* ======================
   FOOTER
====================== */
.footer-modern {
	background: #111827;
	color: #fff;
}

.footer-modern a {
	color: #d1d5db;
}