:root{
/* ---- base palette (Electric Navy) ---- */
--wb-base:#0B1220;
--wb-deep:#070C16;
--wb-card:#EEF2F8;
--wb-accent:#3B82F6;
--wb-accent-strong:#2563EB;
--wb-accent-soft:#93B8F8;
--wb-white:#FFFFFF;
--wb-muted:#8A94A6;
--wb-black:#05080F;
--wb-cta:#25D366;
--wb-cta-strong:#1FAF54;
--wb-yellow:#FFCD48;
--wb-border-light:#D3D8DF;

/* ---- semantic surfaces ---- */
--surface-primary:var(--wb-base);
--surface-deep:var(--wb-deep);
--surface-card:var(--wb-card);
--surface-overlay:rgba(7,12,22,0.86);

/* ---- semantic text ---- */
--text-on-dark:var(--wb-white);
--text-on-dark-muted:var(--wb-muted);
--text-on-card:var(--wb-deep);
--text-on-card-muted:#5B6472;
--text-accent:var(--wb-accent);

/* ---- interactive ---- */
--accent-default:var(--wb-accent);
--accent-hover:var(--wb-accent-strong);
--accent-active:#1D4ED8;
--accent-on-accent:var(--wb-deep); /* text/icons placed on top of accent fills */

/* ---- borders ---- */
--border-on-dark:rgba(255,255,255,0.10);
--border-on-dark-strong:rgba(255,255,255,0.18);
--border-on-card:rgba(7,12,22,0.10);
--border-accent:rgba(59,130,246,0.45);

/* ---- states ---- */
--state-error:#FF6B6B;
--state-success:var(--wb-cta);
--state-warning:#FFCD48;

/* ---- focus ---- */
--focus-ring:0 0 0 3px rgba(59,130,246,0.35);
}