/* Fully Expanded Automattic.css Utilities */

.p-xxs {
  padding: var(--spacing-xxs);
}

.pt-xxs {
  padding-top: var(--spacing-xxs);
}

.pr-xxs {
  padding-right: var(--spacing-xxs);
}

.pb-xxs {
  padding-bottom: var(--spacing-xxs);
}

.pl-xxs {
  padding-left: var(--spacing-xxs);
}

.px-xxs {
  padding-left: var(--spacing-xxs);
  padding-right: var(--spacing-xxs);
}

.py-xxs {
  padding-top: var(--spacing-xxs);
  padding-bottom: var(--spacing-xxs);
}

.p-xs {
  padding: var(--spacing-xs);
}

.pt-xs {
  padding-top: var(--spacing-xs);
}

.pr-xs {
  padding-right: var(--spacing-xs);
}

.pb-xs {
  padding-bottom: var(--spacing-xs);
}

.pl-xs {
  padding-left: var(--spacing-xs);
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.pt-sm {
  padding-top: var(--spacing-sm);
}

.pr-sm {
  padding-right: var(--spacing-sm);
}

.pb-sm {
  padding-bottom: var(--spacing-sm);
}

.pl-sm {
  padding-left: var(--spacing-sm);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.pt-md {
  padding-top: var(--spacing-md);
}

.pr-md {
  padding-right: var(--spacing-md);
}

.pb-md {
  padding-bottom: var(--spacing-md);
}

.pl-md {
  padding-left: var(--spacing-md);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

.pr-lg {
  padding-right: var(--spacing-lg);
}

.pb-lg {
  padding-bottom: var(--spacing-lg);
}

.pl-lg {
  padding-left: var(--spacing-lg);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

.pr-xl {
  padding-right: var(--spacing-xl);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pl-xl {
  padding-left: var(--spacing-xl);
}

.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.p-xxl {
  padding: var(--spacing-xxl);
}

.pt-xxl {
  padding-top: var(--spacing-xxl);
}

.pr-xxl {
  padding-right: var(--spacing-xxl);
}

.pb-xxl {
  padding-bottom: var(--spacing-xxl);
}

.pl-xxl {
  padding-left: var(--spacing-xxl);
}

.px-xxl {
  padding-left: var(--spacing-xxl);
  padding-right: var(--spacing-xxl);
}

.py-xxl {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}

.m-xxs {
  margin: var(--spacing-xxs);
}

.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.mt-xxs {
  margin-top: var(--spacing-xxs);
}

.mr-xxs {
  margin-right: var(--spacing-xxs);
}

.mb-xxs {
  margin-bottom: var(--spacing-xxs);
}

.ml-xxs {
  margin-left: var(--spacing-xxs);
}

.mx-xxs {
  margin-left: var(--spacing-xxs);
  margin-right: var(--spacing-xxs);
}

.my-xxs {
  margin-top: var(--spacing-xxs);
  margin-bottom: var(--spacing-xxs);
}

.m-xs {
  margin: var(--spacing-xs);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}

.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.mx-xl {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}

.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.m-xxl {
  margin: var(--spacing-xxl);
}

.mt-xxl {
  margin-top: var(--spacing-xxl);
}

.mr-xxl {
  margin-right: var(--spacing-xxl);
}

.mb-xxl {
  margin-bottom: var(--spacing-xxl);
}

.ml-xxl {
  margin-left: var(--spacing-xxl);
}

.mx-xxl {
  margin-left: var(--spacing-xxl);
  margin-right: var(--spacing-xxl);
}

.my-xxl {
  margin-top: var(--spacing-xxl);
  margin-bottom: var(--spacing-xxl);
}

.gap-xxs {
  gap: var(--spacing-xxs);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-xxl {
  gap: var(--spacing-xxl);
}

.grid-gap {
  gap: var(--spacing-sm);
}

.container-gap {
  gap: var(--container-gap);
}

.content-gap {
  gap: var(--content-gap);
}


.stretch {
  align-items: stretch;
  justify-content: stretch;
}

.text--primary {
  color: var(--color-primary);
}

.bg--primary {
  background-color: var(--color-primary);
}

.text--secondary {
  color: var(--color-secondary);
}

.bg--secondary {
  background-color: var(--color-secondary);
}

.text--tertiary {
  color: var(--color-tertiary);
}

.bg--tertiary {
  background-color: var(--color-tertiary);
}

.text--accent {
  color: var(--color-accent);
}

.bg--accent {
  background-color: var(--color-accent);
}

.text--base {
  color: var(--color-base);
}

.bg--base {
  background-color: var(--color-base);
}

.text--neutral {
  color: var(--color-neutral);
}

.bg--neutral {
  background-color: var(--color-neutral);
}

.bg--light {
  background-color: var(--bg-light);
}

.bg--dark {
  background-color: var(--bg-dark);
}

.bg--ultra-light {
  background-color: var(--bg-ultra-light);
}

.bg--ultra-dark {
  background-color: var(--bg-ultra-dark);
}

.text--xs {
  font-size: var(--font-size-xs);
}

.text--sm {
  font-size: var(--font-size-sm);
}

.text--base {
  font-size: var(--font-size-base);
}

.text--lg {
  font-size: var(--font-size-lg);
}

.text--xl {
  font-size: var(--font-size-xl);
}

.text--xxl {
  font-size: var(--font-size-xxl);
}

.text--light {
  color: var(--text-light);
}

.text--dark {
  color: var(--text-dark);
}

.text--light-muted {
  color: var(--text-light-muted);
}

.text--dark-muted {
  color: var(--text-dark-muted);
}

.text--100 {
  font-weight: 100;
}

.text--200 {
  font-weight: 200;
}

.text--300 {
  font-weight: 300;
}

.text--400 {
  font-weight: 400;
}

.text--500 {
  font-weight: 500;
}

.text--600 {
  font-weight: 600;
}

.text--700 {
  font-weight: 700;
}

.text--800 {
  font-weight: 800;
}

.text--900 {
  font-weight: 900;
}

.text--italic {
  font-style: italic;
}

.text--oblique {
  font-style: oblique;
}

.text--underline {
  text-decoration: underline;
}

.text--line-through {
  text-decoration: line-through;
}

.text--none {
  text-decoration: none;
}

.text--uppercase {
  text-transform: uppercase;
}

.text--lowercase {
  text-transform: lowercase;
}

.text--capitalize {
  text-transform: capitalize;
}

.text--left {
  text-align: left;
}

.text--center {
  text-align: center;
}

.text--right {
  text-align: right;
}

.text--justify {
  text-align: justify;
}

.z--0 {
  z-index: 0;
}

.z--10 {
  z-index: 10;
}

.z--20 {
  z-index: 20;
}

.z--30 {
  z-index: 30;
}

.z--40 {
  z-index: 40;
}

.z--50 {
  z-index: 50;
}

.z--60 {
  z-index: 60;
}

.z--70 {
  z-index: 70;
}

.z--80 {
  z-index: 80;
}

.z--90 {
  z-index: 90;
}

.z--top {
  z-index: 9999;
}

.z--bottom {
  z-index: -1;
}

.focus--primary:focus {
  outline-color: var(--color-primary);
}

.focus--accent:focus {
  outline-color: var(--color-accent);
}

.focus-parent--shadow:focus-within {
  box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}

.focus-parent--outline:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.grid--1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.grid--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid--5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.grid--6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid--7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.grid--8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.grid--9 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.grid--10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.grid--11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}

.grid--12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.line-clamp--1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp--2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp--3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp--4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp--5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.box-shadow--sm {
  box-shadow: var(--box-shadow-sm);
}

.box-shadow--md {
  box-shadow: var(--box-shadow-md);
}

.box-shadow--lg {
  box-shadow: var(--box-shadow-lg);
}

.box-shadow--xl {
  box-shadow: var(--box-shadow-xl);
}

.section--xxs {
  padding-block: var(--section-spacing-xxs);
}

.header--xxs {
  padding-block: var(--spacing-xxs);
}

.section--xs {
  padding-block: var(--section-spacing-xs);
}

.header--xs {
  padding-block: var(--spacing-xs);
}

.section--sm {
  padding-block: var(--section-spacing-sm);
}

.header--sm {
  padding-block: var(--spacing-sm);
}

.section--md {
  padding-block: var(--section-spacing-md);
}

.header--md {
  padding-block: var(--spacing-md);
}

.section--lg {
  padding-block: var(--section-spacing-lg);
}

.header--lg {
  padding-block: var(--spacing-lg);
}

.section--xl {
  padding-block: var(--section-spacing-xl);
}

.header--xl {
  padding-block: var(--spacing-xl);
}

.section--xxl {
  padding-block: var(--section-spacing-xxl);
}

.header--xxl {
  padding-block: var(--spacing-xxl);
}

.clickable-parent {
  position: relative;
}
.clickable-parent a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hidden-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* === Responsive Utilities === */

/* Padding Top by Breakpoint */
@media (min-width: 576px) {
  .pt-sm\@sm { padding-top: var(--spacing-sm); }
}
@media (min-width: 768px) {
  .pt-md\@md { padding-top: var(--spacing-md); }
}
@media (min-width: 1024px) {
  .pt-lg\@lg { padding-top: var(--spacing-lg); }
}
@media (min-width: 1280px) {
  .pt-xl\@xl { padding-top: var(--spacing-xl); }
}
@media (min-width: 1440px) {
  .pt-xxl\@xxl { padding-top: var(--spacing-xxl); }
}

/* Font Sizes by Breakpoint */
@media (min-width: 576px) {
  .text--sm\@sm { font-size: var(--font-size-sm); }
}
@media (min-width: 768px) {
  .text--md\@md { font-size: var(--font-size-base); }
}
@media (min-width: 1024px) {
  .text--lg\@lg { font-size: var(--font-size-lg); }
}
@media (min-width: 1280px) {
  .text--xl\@xl { font-size: var(--font-size-xl); }
}
@media (min-width: 1440px) {
  .text--xxl\@xxl { font-size: var(--font-size-xxl); }
}

/* Responsive Margin Top */
@media (min-width: 576px) {
  .mt-sm\@sm { margin-top: var(--spacing-sm); }
}
@media (min-width: 768px) {
  .mt-md\@md { margin-top: var(--spacing-md); }
}
@media (min-width: 1024px) {
  .mt-lg\@lg { margin-top: var(--spacing-lg); }
}
@media (min-width: 1280px) {
  .mt-xl\@xl { margin-top: var(--spacing-xl); }
}
@media (min-width: 1440px) {
  .mt-xxl\@xxl { margin-top: var(--spacing-xxl); }
}

/* Responsive Margin Bottom */
@media (min-width: 576px) {
  .mb-sm\@sm { margin-bottom: var(--spacing-sm); }
}
@media (min-width: 768px) {
  .mb-md\@md { margin-bottom: var(--spacing-md); }
}
@media (min-width: 1024px) {
  .mb-lg\@lg { margin-bottom: var(--spacing-lg); }
}
@media (min-width: 1280px) {
  .mb-xl\@xl { margin-bottom: var(--spacing-xl); }
}
@media (min-width: 1440px) {
  .mb-xxl\@xxl { margin-bottom: var(--spacing-xxl); }
}

/* Responsive Padding Left */
@media (min-width: 576px) {
  .pl-sm\@sm { padding-left: var(--spacing-sm); }
}
@media (min-width: 768px) {
  .pl-md\@md { padding-left: var(--spacing-md); }
}
@media (min-width: 1024px) {
  .pl-lg\@lg { padding-left: var(--spacing-lg); }
}
@media (min-width: 1280px) {
  .pl-xl\@xl { padding-left: var(--spacing-xl); }
}
@media (min-width: 1440px) {
  .pl-xxl\@xxl { padding-left: var(--spacing-xxl); }
}

/* Responsive Padding Right */
@media (min-width: 576px) {
  .pr-sm\@sm { padding-right: var(--spacing-sm); }
}
@media (min-width: 768px) {
  .pr-md\@md { padding-right: var(--spacing-md); }
}
@media (min-width: 1024px) {
  .pr-lg\@lg { padding-right: var(--spacing-lg); }
}
@media (min-width: 1280px) {
  .pr-xl\@xl { padding-right: var(--spacing-xl); }
}
@media (min-width: 1440px) {
  .pr-xxl\@xxl { padding-right: var(--spacing-xxl); }
}

/* Responsive Padding Bottom */
@media (min-width: 576px) {
  .pb-sm\@sm { padding-bottom: var(--spacing-sm); }
}
@media (min-width: 768px) {
  .pb-md\@md { padding-bottom: var(--spacing-md); }
}
@media (min-width: 1024px) {
  .pb-lg\@lg { padding-bottom: var(--spacing-lg); }
}
@media (min-width: 1280px) {
  .pb-xl\@xl { padding-bottom: var(--spacing-xl); }
}
@media (min-width: 1440px) {
  .pb-xxl\@xxl { padding-bottom: var(--spacing-xxl); }
}

/* === Responsive Text Alignment === */

@media (min-width: 576px) {
  .text--left\@sm { text-align: left; }
  .text--center\@sm { text-align: center; }
  .text--right\@sm { text-align: right; }
  .text--justify\@sm { text-align: justify; }
}
@media (min-width: 768px) {
  .text--left\@md { text-align: left; }
  .text--center\@md { text-align: center; }
  .text--right\@md { text-align: right; }
  .text--justify\@md { text-align: justify; }
}
@media (min-width: 1024px) {
  .text--left\@lg { text-align: left; }
  .text--center\@lg { text-align: center; }
  .text--right\@lg { text-align: right; }
  .text--justify\@lg { text-align: justify; }
}
@media (min-width: 1280px) {
  .text--left\@xl { text-align: left; }
  .text--center\@xl { text-align: center; }
  .text--right\@xl { text-align: right; }
  .text--justify\@xl { text-align: justify; }
}
@media (min-width: 1440px) {
  .text--left\@xxl { text-align: left; }
  .text--center\@xxl { text-align: center; }
  .text--right\@xxl { text-align: right; }
  .text--justify\@xxl { text-align: justify; }
}

/* === Responsive Display Utilities === */

@media (min-width: 576px) {
  .display--block\@sm { display: block; }
  .display--flex\@sm { display: flex; }
  .flex--row\@sm { flex-direction: row; }
  .flex--column\@sm { flex-direction: column; }
}
@media (min-width: 768px) {
  .display--block\@md { display: block; }
  .display--flex\@md { display: flex; }
  .flex--row\@md { flex-direction: row; }
  .flex--column\@md { flex-direction: column; }
}
@media (min-width: 1024px) {
  .display--block\@lg { display: block; }
  .display--flex\@lg { display: flex; }
  .flex--row\@lg { flex-direction: row; }
  .flex--column\@lg { flex-direction: column; }
}
@media (min-width: 1280px) {
  .display--block\@xl { display: block; }
  .display--flex\@xl { display: flex; }
  .flex--row\@xl { flex-direction: row; }
  .flex--column\@xl { flex-direction: column; }
}
@media (min-width: 1440px) {
  .display--block\@xxl { display: block; }
  .display--flex\@xxl { display: flex; }
  .flex--row\@xxl { flex-direction: row; }
  .flex--column\@xxl { flex-direction: column; }
}

/* === Responsive Gap Utilities === */

@media (min-width: 576px) {
  .gap-sm\@sm { gap: var(--spacing-sm); }
}
@media (min-width: 768px) {
  .gap-md\@md { gap: var(--spacing-md); }
}
@media (min-width: 1024px) {
  .gap-lg\@lg { gap: var(--spacing-lg); }
}
@media (min-width: 1280px) {
  .gap-xl\@xl { gap: var(--spacing-xl); }
}
@media (min-width: 1440px) {
  .gap-xxl\@xxl { gap: var(--spacing-xxl); }
}

/* === Gap Utilities === */

/* Row Gaps */
.row-gap--sm { row-gap: var(--spacing-sm); }
.row-gap--md { row-gap: var(--spacing-md); }
.row-gap--lg { row-gap: var(--spacing-lg); }
.row-gap--xl { row-gap: var(--spacing-xl); }
.row-gap--xxl { row-gap: var(--spacing-xxl); }

/* Column Gaps */
.col-gap--sm { column-gap: var(--spacing-sm); }
.col-gap--md { column-gap: var(--spacing-md); }
.col-gap--lg { column-gap: var(--spacing-lg); }
.col-gap--xl { column-gap: var(--spacing-xl); }
.col-gap--xxl { column-gap: var(--spacing-xxl); }

/* === Button System === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-block, 0.75em) var(--btn-padding-inline, 1.5em);
  font-weight: var(--btn-font-weight, 600);
  border-radius: var(--btn-radius, 6px);
  font-size: var(--font-size-base);
  line-height: 1.25;
  cursor: pointer;
  transition: var(--btn-transition, all 0.2s ease);
  text-decoration: none;
  border: var(--btn-border-width, 1px) solid transparent;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--white);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--white);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
}

.btn--outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--white);
}

.btn--outline-accent {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline-accent:hover {
  background-color: var(--color-accent);
  color: var(--white);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--white);
}

.btn--secondary:hover {
  background-color: var(--color-secondary-dark);
}

.btn--neutral {
  background-color: var(--color-neutral);
  color: var(--text-dark);
}

.btn--neutral:hover {
  background-color: var(--color-neutral-dark);
}

:root {
  /* Colors */
  --bg-light: #ffffff; /* Default light background */
  --bg-dark: #000000; /* Default dark background */
  --bg-ultra-light: #f5f5f5; /* Default ultra-light background */
  --bg-ultra-dark: #1a1a1a; /* Default ultra-dark background */
  --color-primary: #0071e3; /* Default primary color */
  --color-primary-dark: #005bb5; /* Darker primary color */
  --color-secondary: #6e6e73; /* Default secondary color */
  --color-tertiary: #333333; /* Default tertiary color */
  --color-accent: #10B981; /* Default accent color */
  --color-accent-dark: #059669; /* Darker accent color */
  --color-neutral: #f0f0f0; /* Default neutral color */
  --color-neutral-dark: #d9d9d9; /* Darker neutral color */
  --text-light: #ffffff; /* Default light text */
  --text-dark: #000000; /* Default dark text */
  --text-light-muted: #d1d1d1; /* Default muted light text */
  --text-dark-muted: #6e6e73; /* Default muted dark text */

  /* Spacing */
  --spacing-xxs: 0.25rem; /* Extra extra small spacing */
  --spacing-xs: 0.5rem; /* Extra small spacing */
  --spacing-sm: 0.75rem; /* Small spacing */
  --spacing-md: 1rem; /* Medium spacing */
  --spacing-lg: 1.5rem; /* Large spacing */
  --spacing-xl: 2rem; /* Extra large spacing */
  --spacing-xxl: 3rem; /* Extra extra large spacing */

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* Extra small font size */
  --font-size-sm: 0.875rem; /* Small font size */
  --font-size-base: 1rem; /* Base font size */
  --font-size-lg: 1.25rem; /* Large font size */
  --font-size-xl: 1.5rem; /* Extra large font size */
  --font-size-xxl: 2rem; /* Extra extra large font size */

  /* Shadows */
  --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); /* Small shadow */
  --box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* Medium shadow */
  --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Large shadow */
  --box-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); /* Extra large shadow */

  /* Gaps */
  --container-gap: 1rem; /* Default container gap */
  --content-gap: 1.5rem; /* Default content gap */

  /* Focus */
  --focus-width: 2px; /* Focus outline width */
  --focus-color: var(--color-primary); /* Focus outline color */
  --focus-offset: 2px; /* Focus outline offset */

  /* Border Radius */
  --btn-radius: 6px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

.h--25 {
  height: 25%;
}

.h--50 {
  height: 50%;
}

.h--75 {
  height: 75%;
}

.h--100 {
  height: 100%;
}

.h--screen {
  height: 100vh;
}

.h--auto {
  height: auto;
}

.max--w-xs {
  max-width: 20rem;
}

.max--w-sm {
  max-width: 24rem;
}

.max--w-md {
  max-width: 28rem;
}

.max--w-lg {
  max-width: 32rem;
}

.max--w-xl {
  max-width: 36rem;
}

.max--w-2xl {
  max-width: 42rem;
}

.max--w-3xl {
  max-width: 48rem;
}

.max--w-4xl {
  max-width: 56rem;
}

.max--w-5xl {
  max-width: 64rem;
}

.max--w-full {
  max-width: 100%;
}

.max--w-100 {
  max-width: 100%;
}

.radius--none {
  border-radius: var(--radius-none);
}

.radius--xs {
  border-radius: var(--radius-xs);
}

.radius--sm {
  border-radius: var(--radius-sm);
}

.radius--md {
  border-radius: var(--radius-md);
}

.radius--lg {
  border-radius: var(--radius-lg);
}

.radius--xl {
  border-radius: var(--radius-xl);
}

.radius--full {
  border-radius: var(--radius-full);
}

.align--center {
  align-items: center;
}

.justify--center {
  justify-content: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.static {
  position: static;
}

/* === Layout Systems === */

/* Auto-Grid Modifiers */
@media (min-width: 576px) { 
  .grid--auto-fit\@sm { grid-template-columns: repeat(auto-fit, minmax(var(--min, 0), 1fr)); } 
}
@media (min-width: 768px) { 
  .grid--auto-fit\@md { grid-template-columns: repeat(auto-fit, minmax(var(--min, 0), 1fr)); } 
}
@media (min-width: 1024px) { 
  .grid--auto-fit\@lg { grid-template-columns: repeat(auto-fit, minmax(var(--min, 0), 1fr)); } 
}
@media (min-width: 1280px) { 
  .grid--auto-fit\@xl { grid-template-columns: repeat(auto-fit, minmax(var(--min, 0), 1fr)); } 
}
@media (min-width: 1440px) { 
  .grid--auto-fit\@xxl { grid-template-columns: repeat(auto-fit, minmax(var(--min, 0), 1fr)); } 
}

/* Variable Grid */
.variable-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 0), 1fr)); 
}

/* Masonry Layout */
.masonry--1 { column-count: 1; }
.masonry--2 { column-count: 2; }
.masonry--3 { column-count: 3; }
.masonry--4 { column-count: 4; }
.masonry--5 { column-count: 5; }

/* Column Helpers */
.col-count--1 { column-count: 1; }
.col-count--2 { column-count: 2; }
.col-count--3 { column-count: 3; }
.col-count--4 { column-count: 4; }
.col-count--5 { column-count: 5; }
.col-count--6 { column-count: 6; }

/* === Helpers & Effects === */

/* Sticky Element */
.sticky { position: sticky; top: var(--top, 0); }

/* Opacity Controls */
.opacity--5 { opacity: 0.05; }
.opacity--10 { opacity: 0.1; }
.opacity--15 { opacity: 0.15; }
.opacity--20 { opacity: 0.2; }
.opacity--25 { opacity: 0.25; }
.opacity--30 { opacity: 0.3; }
.opacity--35 { opacity: 0.35; }
.opacity--40 { opacity: 0.4; }
.opacity--45 { opacity: 0.45; }
.opacity--50 { opacity: 0.5; }
.opacity--55 { opacity: 0.55; }
.opacity--60 { opacity: 0.6; }
.opacity--65 { opacity: 0.65; }
.opacity--70 { opacity: 0.7; }
.opacity--75 { opacity: 0.75; }
.opacity--80 { opacity: 0.8; }
.opacity--85 { opacity: 0.85; }
.opacity--90 { opacity: 0.9; }
.opacity--95 { opacity: 0.95; }

/* Flip Transforms */
.flip--x { transform: scaleX(-1); }
.flip--y { transform: scaleY(-1); }
.flip--xy, .flip--both { transform: scale(-1, -1); }

/* Fade Masks */
.fade--block { mask-image: linear-gradient(to bottom, black, transparent); }
.fade--block-reverse { mask-image: linear-gradient(to top, black, transparent); }
.fade--inline { mask-image: linear-gradient(to right, black, transparent); }
.fade--inline-reverse { mask-image: linear-gradient(to left, black, transparent); }

/* Overlay Colors */
.overlay--primary-light-trans-40 { background-color: rgba(var(--color-primary-light-rgb), 0.4); }
.overlay--primary-light-trans-60 { background-color: rgba(var(--color-primary-light-rgb), 0.6); }
.overlay--primary-trans-40 { background-color: rgba(var(--color-primary-rgb), 0.4); }
.overlay--primary-trans-60 { background-color: rgba(var(--color-primary-rgb), 0.6); }
.overlay--accent-light-trans-40 { background-color: rgba(var(--color-accent-light-rgb), 0.4); }
.overlay--accent-light-trans-60 { background-color: rgba(var(--color-accent-light-rgb), 0.6); }
.overlay--accent-trans-40 { background-color: rgba(var(--color-accent-rgb), 0.4); }
.overlay--accent-trans-60 { background-color: rgba(var(--color-accent-rgb), 0.6); }
.overlay--secondary-light-trans-40 { background-color: rgba(var(--color-secondary-light-rgb), 0.4); }
.overlay--secondary-light-trans-60 { background-color: rgba(var(--color-secondary-light-rgb), 0.6); }
.overlay--secondary-trans-40 { background-color: rgba(var(--color-secondary-rgb), 0.4); }
.overlay--secondary-trans-60 { background-color: rgba(var(--color-secondary-rgb), 0.6); }
.overlay--neutral-light-trans-40 { background-color: rgba(var(--color-neutral-light-rgb), 0.4); }
.overlay--neutral-light-trans-60 { background-color: rgba(var(--color-neutral-light-rgb), 0.6); }
.overlay--neutral-trans-40 { background-color: rgba(var(--color-neutral-rgb), 0.4); }
.overlay--neutral-trans-60 { background-color: rgba(var(--color-neutral-rgb), 0.6); }

/* === Extra Quality-of-Life Sets === */

/* Row/Column-Specific Z-Index Helpers */
.z--110 { z-index: 110; }
.z--200 { z-index: 200; }
/* ...repeat up to .z--900... */

/* Object-Fit Shortcut */
img { object-fit: var(--object-fit, cover); object-position: var(--object-position, center); }

/* Contextual Spacing Presets */
.container-gap { gap: var(--container-gap); }
.content-gap { gap: var(--content-gap); }
.grid-gap { gap: var(--grid-gap); }