/* VPL brand theme: piggybacks on the provided brand kit CSS and adapts to our components */
@import url('/static/VPL_brand_kit/static/css/theme.css');

/* Force site-wide base tokens to desired palettes (override brand kit) */
:root{
	/* Light (pure white) */
	--bg:#ffffff;            /* page background */
	--text:#000000;          /* primary text */
	--muted:#333333;         /* secondary text */
	--panel:#ffffff;         /* panels/buttons base */
	--card:#ffffff;          /* cards */
	--border:#e5e7eb;        /* borders */
	/* Keep our internal tokens in sync */
	--fg:#000000;
}
[data-theme="dark"]{
	/* Dark */
	--bg:#0d1117;
	--text:#ffffff;
	--muted:#ffffff;
	--panel:#0d1117;
	--card:#0d1117;
	--border:#30363d;
	--fg:#ffffff;
}

/* Map/override brand-kit variables to our core tokens so both light/dark work */
:root{
	--text: var(--fg);
	--muted: var(--muted);
	--border: var(--border);
	--panel: var(--card);
	--card: var(--card);
	--brand: var(--primary);
	--danger: #ef4444;
}

/* Ensure brand CSS doesn't override our base colors */
body{ background: var(--bg) !important; color: var(--fg) !important; }

/* Map brand kit palette to our UI elements */
/* Light mode: solid white navbar */
.vp-navbar{ background:#ffffff; border-bottom:1px solid var(--border); }
[data-theme="dark"] .vp-navbar{ background:rgba(11,11,16,0.6); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.vp-logo{ color:var(--text); font-weight:800; }
.vp-nav a{ color:var(--fg); }
.vp-nav a:hover{ text-decoration: underline; }
.vp-container a, a{ color: var(--fg); }
.vp-main{ padding-top:24px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; }
.btn{ background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:10px; }
.btn.primary{ background:var(--brand); border-color:transparent; color:#fff; }
.btn.danger{ background:var(--danger); border-color:transparent; color:#fff; }
.muted{ color:var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=file], select, .input{ background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px; }
input::placeholder{ color:#7b8698 }
.section-title .dot{ background:var(--brand); }