:root{

/* ===== Colors ===== */

--primary:#2563eb;
--secondary:#00c2ff;
--accent:#00ffb3;

--bg:#08111f;
--bg2:#101a2d;

--card:rgba(255,255,255,.08);

--glass:rgba(255,255,255,.08);

--white:#ffffff;

/* Navigation controls need their own token: page text and icon colors can
   differ from the contrast needed over the fixed navbar. */
--nav-link:#ffffff;

--text:#d8e2ff;

--gray:#a7b3cf;

--border:rgba(255,255,255,.12);

--shadow:0 20px 40px rgba(0,0,0,.35);

--gradient:linear-gradient(
135deg,
#2563eb,
#00c2ff,
#00ffb3
);

/* ===== Font ===== */

--font:'Poppins',sans-serif;

/* ===== Radius ===== */

--radius:18px;

/* ===== Animation ===== */

--transition:.35s ease;

/* ===== Container ===== */

--container:1280px;

/* ===== Navbar ===== */

--nav-height:80px;

}

:root[data-theme="light"]{
--bg:#ffffff;
--bg2:#eef3f8;
--card:rgba(8,17,31,.06);
--glass:rgba(255,255,255,.76);
--white:#142033;
--nav-link:#142033;
--text:#222222;
--gray:#526176;
--border:rgba(8,17,31,.16);
--shadow:0 20px 40px rgba(8,17,31,.15);
}