/* === CSS Variables === */
:root {
  --basic-primary: #e94560;
  --basic-accent: #0f3460;
  --basic-highlight: #1a1a2e;
  --basic-text: #333333;
  --basic-bg: #ffffff;
  --basic-link: #0073aa;
  --basic-border: #e0e0e0;
  --basic-header-bg: #1a1a2e;
  --basic-header-text: #ffffff;
  --basic-footer-bg: #1a1a2e;
  --basic-footer-text: #cccccc;
  --basic-footer-heading: #cccccc;
  --basic-footer-link: #cccccc;
  --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-primary);--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-primary)}

/* === Tag Styles (scoped to .basic-front) === */
:where(body.basic-front) h1{font-size:2.5rem;line-height:1.2;font-weight:700}
:where(body.basic-front) h2{font-size:2.25rem;line-height:1.2;font-weight:700}
:where(body.basic-front) h3{font-size:2.0rem;line-height:1.3;font-weight:700}
:where(body.basic-front) h4{font-size:1.75rem;line-height:1.3;font-weight:700}
:where(body.basic-front) h5{font-size:1.5rem;line-height:1.4;font-weight:700}
:where(body.basic-front) h6{font-size:1.25rem;line-height:1.4;font-weight:700}
:where(body.basic-front) p{font-size:1rem;line-height:1.8}