/* === CSS Variables === */
:root {
  --basic-primary: #0369a1;
  --basic-accent: #38bdf8;
  --basic-highlight: #0f172a;
  --basic-text: #333333;
  --basic-bg: #ffffff;
  --basic-link: #0369a1;
  --basic-border: #e2e8f0;
  --basic-heading-color: #111827;
  --basic-container-width: 1200px;
  --basic-header-bg: #0f172a;
  --basic-header-text: #ffffff;
  --basic-header-link: #ffffff;
  --basic-header-link-hover: #ffffff;
  --basic-header-border: rgba(255,255,255,0.1);
  --basic-footer-bg: #0f172a;
  --basic-footer-text: #ffffff;
  --basic-footer-heading: #ffffff;
  --basic-footer-link: #ffffff;
  --basic-footer-link-hover: #ffffff;
  --basic-footer-border: rgba(255,255,255,0.1);
}
:where(body.basic-front){color:var(--basic-text);background:var(--basic-bg)}
:where(body.basic-front) a{color:var(--basic-link)}
body.basic-front{--bs-heading-color:var(--basic-heading-color);--bs-body-color:var(--basic-text);--bs-body-bg:var(--basic-bg);--bs-link-color:var(--basic-link)}
:where(body.basic-front) :where(h1,h2,h3,h4,h5,h6){color:var(--basic-heading-color)}