vanduo-framework 1.1.8-docs-update

package/css/core/helpers.css

@@ -0,0 +1,2202 @@
+/**
+ * Vanduo Framework - Helpers
+ * Utility classes for spacing, display, positioning, and more
+ *
+ * Design System: Fibonacci / Golden Ratio (phi = 1.618)
+ * Spacing values follow the Fibonacci sequence: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144
+ * Consecutive Fibonacci pairs yield ratios approaching phi (e.g. 21/13 = 1.615)
+ */
+
+:root {
+  /* Golden Ratio Constants */
+  --phi: 1.618;
+  --phi-inverse: 0.618;
+  --phi-percent-major: 61.8%;
+  --phi-percent-minor: 38.2%;
+
+  /* Fibonacci Border Radius Scale */
+  --radius-fib-2: 0.125rem;
+  /* 2px */
+  --radius-fib-3: 0.1875rem;
+  /* 3px */
+  --radius-fib-5: 0.3125rem;
+  /* 5px */
+  --radius-fib-8: 0.5rem;
+  /* 8px */
+  --radius-fib-13: 0.8125rem;
+  /* 13px */
+  --radius-fib-21: 1.3125rem;
+  /* 21px */
+
+  /* Radius Scale Factor (for Theme Customizer) */
+  --radius-scale: 1;
+
+  /* Fibonacci Spacing Scale */
+  --spacing-0: 0;
+  --spacing-1: 0.0625rem;
+  /* 1px  - fib(1) */
+  --spacing-2: 0.125rem;
+  /* 2px  - fib(2) */
+  --spacing-3: 0.1875rem;
+  /* 3px  - fib(3) */
+  --spacing-4: 0.3125rem;
+  /* 5px  - fib(5) */
+  --spacing-5: 0.5rem;
+  /* 8px  - fib(8) */
+  --spacing-6: 0.8125rem;
+  /* 13px - fib(13) */
+  --spacing-8: 1.3125rem;
+  /* 21px - fib(21) */
+  --spacing-10: 2.125rem;
+  /* 34px - fib(34) */
+  --spacing-12: 3.4375rem;
+  /* 55px - fib(55) */
+  --spacing-16: 5.5625rem;
+  /* 89px - fib(89) */
+  --spacing-20: 9rem;
+  /* 144px - fib(144) */
+  --spacing-24: 9rem;
+  /* 144px - alias */
+}
+
+/* Margin Utilities */
+.vd-m-0 {
+  margin: var(--spacing-0);
+}
+
+.vd-m-1 {
+  margin: var(--spacing-1);
+}
+
+.vd-m-2 {
+  margin: var(--spacing-2);
+}
+
+.vd-m-3 {
+  margin: var(--spacing-3);
+}
+
+.vd-m-4 {
+  margin: var(--spacing-4);
+}
+
+.vd-m-5 {
+  margin: var(--spacing-5);
+}
+
+.vd-m-6 {
+  margin: var(--spacing-6);
+}
+
+.vd-m-8 {
+  margin: var(--spacing-8);
+}
+
+.vd-m-10 {
+  margin: var(--spacing-10);
+}
+
+.vd-m-12 {
+  margin: var(--spacing-12);
+}
+
+.vd-m-16 {
+  margin: var(--spacing-16);
+}
+
+.vd-m-20 {
+  margin: var(--spacing-20);
+}
+
+.vd-m-24 {
+  margin: var(--spacing-24);
+}
+
+.vd-m-auto {
+  margin: auto;
+}
+
+/* Margin Top */
+.mt-0 {
+  margin-top: var(--spacing-0);
+}
+
+.mt-1 {
+  margin-top: var(--spacing-1);
+}
+
+.mt-2 {
+  margin-top: var(--spacing-2);
+}
+
+.mt-3 {
+  margin-top: var(--spacing-3);
+}
+
+.mt-4 {
+  margin-top: var(--spacing-4);
+}
+
+.mt-5 {
+  margin-top: var(--spacing-5);
+}
+
+.mt-6 {
+  margin-top: var(--spacing-6);
+}
+
+.mt-8 {
+  margin-top: var(--spacing-8);
+}
+
+.mt-10 {
+  margin-top: var(--spacing-10);
+}
+
+.mt-12 {
+  margin-top: var(--spacing-12);
+}
+
+.mt-16 {
+  margin-top: var(--spacing-16);
+}
+
+.mt-20 {
+  margin-top: var(--spacing-20);
+}
+
+.mt-24 {
+  margin-top: var(--spacing-24);
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+/* Margin Right */
+.mr-0 {
+  margin-right: var(--spacing-0);
+}
+
+.mr-1 {
+  margin-right: var(--spacing-1);
+}
+
+.mr-2 {
+  margin-right: var(--spacing-2);
+}
+
+.mr-3 {
+  margin-right: var(--spacing-3);
+}
+
+.mr-4 {
+  margin-right: var(--spacing-4);
+}
+
+.mr-5 {
+  margin-right: var(--spacing-5);
+}
+
+.mr-6 {
+  margin-right: var(--spacing-6);
+}
+
+.mr-8 {
+  margin-right: var(--spacing-8);
+}
+
+.mr-10 {
+  margin-right: var(--spacing-10);
+}
+
+.mr-12 {
+  margin-right: var(--spacing-12);
+}
+
+.mr-16 {
+  margin-right: var(--spacing-16);
+}
+
+.mr-20 {
+  margin-right: var(--spacing-20);
+}
+
+.mr-24 {
+  margin-right: var(--spacing-24);
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+/* Margin Bottom */
+.mb-0 {
+  margin-bottom: var(--spacing-0);
+}
+
+.mb-1 {
+  margin-bottom: var(--spacing-1);
+}
+
+.mb-2 {
+  margin-bottom: var(--spacing-2);
+}
+
+.mb-3 {
+  margin-bottom: var(--spacing-3);
+}
+
+.mb-4 {
+  margin-bottom: var(--spacing-4);
+}
+
+.mb-5 {
+  margin-bottom: var(--spacing-5);
+}
+
+.mb-6 {
+  margin-bottom: var(--spacing-6);
+}
+
+.mb-8 {
+  margin-bottom: var(--spacing-8);
+}
+
+.mb-10 {
+  margin-bottom: var(--spacing-10);
+}
+
+.mb-12 {
+  margin-bottom: var(--spacing-12);
+}
+
+.mb-16 {
+  margin-bottom: var(--spacing-16);
+}
+
+.mb-20 {
+  margin-bottom: var(--spacing-20);
+}
+
+.mb-24 {
+  margin-bottom: var(--spacing-24);
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+/* Margin Left */
+.ml-0 {
+  margin-left: var(--spacing-0);
+}
+
+.ml-1 {
+  margin-left: var(--spacing-1);
+}
+
+.ml-2 {
+  margin-left: var(--spacing-2);
+}
+
+.ml-3 {
+  margin-left: var(--spacing-3);
+}
+
+.ml-4 {
+  margin-left: var(--spacing-4);
+}
+
+.ml-5 {
+  margin-left: var(--spacing-5);
+}
+
+.ml-6 {
+  margin-left: var(--spacing-6);
+}
+
+.ml-8 {
+  margin-left: var(--spacing-8);
+}
+
+.ml-10 {
+  margin-left: var(--spacing-10);
+}
+
+.ml-12 {
+  margin-left: var(--spacing-12);
+}
+
+.ml-16 {
+  margin-left: var(--spacing-16);
+}
+
+.ml-20 {
+  margin-left: var(--spacing-20);
+}
+
+.ml-24 {
+  margin-left: var(--spacing-24);
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+/* Padding Utilities */
+.vd-p-0 {
+  padding: var(--spacing-0);
+}
+
+.vd-p-1 {
+  padding: var(--spacing-1);
+}
+
+.vd-p-2 {
+  padding: var(--spacing-2);
+}
+
+.vd-p-3 {
+  padding: var(--spacing-3);
+}
+
+.vd-p-4 {
+  padding: var(--spacing-4);
+}
+
+.vd-p-5 {
+  padding: var(--spacing-5);
+}
+
+.vd-p-6 {
+  padding: var(--spacing-6);
+}
+
+.vd-p-8 {
+  padding: var(--spacing-8);
+}
+
+.vd-p-10 {
+  padding: var(--spacing-10);
+}
+
+.vd-p-12 {
+  padding: var(--spacing-12);
+}
+
+.vd-p-16 {
+  padding: var(--spacing-16);
+}
+
+.vd-p-20 {
+  padding: var(--spacing-20);
+}
+
+.vd-p-24 {
+  padding: var(--spacing-24);
+}
+
+/* Padding Top */
+.pt-0 {
+  padding-top: var(--spacing-0);
+}
+
+.pt-1 {
+  padding-top: var(--spacing-1);
+}
+
+.pt-2 {
+  padding-top: var(--spacing-2);
+}
+
+.pt-3 {
+  padding-top: var(--spacing-3);
+}
+
+.pt-4 {
+  padding-top: var(--spacing-4);
+}
+
+.pt-5 {
+  padding-top: var(--spacing-5);
+}
+
+.pt-6 {
+  padding-top: var(--spacing-6);
+}
+
+.pt-8 {
+  padding-top: var(--spacing-8);
+}
+
+.pt-10 {
+  padding-top: var(--spacing-10);
+}
+
+.pt-12 {
+  padding-top: var(--spacing-12);
+}
+
+.pt-16 {
+  padding-top: var(--spacing-16);
+}
+
+.pt-20 {
+  padding-top: var(--spacing-20);
+}
+
+.pt-24 {
+  padding-top: var(--spacing-24);
+}
+
+/* Padding Right */
+.pr-0 {
+  padding-right: var(--spacing-0);
+}
+
+.pr-1 {
+  padding-right: var(--spacing-1);
+}
+
+.pr-2 {
+  padding-right: var(--spacing-2);
+}
+
+.pr-3 {
+  padding-right: var(--spacing-3);
+}
+
+.pr-4 {
+  padding-right: var(--spacing-4);
+}
+
+.pr-5 {
+  padding-right: var(--spacing-5);
+}
+
+.pr-6 {
+  padding-right: var(--spacing-6);
+}
+
+.pr-8 {
+  padding-right: var(--spacing-8);
+}
+
+.pr-10 {
+  padding-right: var(--spacing-10);
+}
+
+.pr-12 {
+  padding-right: var(--spacing-12);
+}
+
+.pr-16 {
+  padding-right: var(--spacing-16);
+}
+
+.pr-20 {
+  padding-right: var(--spacing-20);
+}
+
+.pr-24 {
+  padding-right: var(--spacing-24);
+}
+
+/* Padding Bottom */
+.pb-0 {
+  padding-bottom: var(--spacing-0);
+}
+
+.pb-1 {
+  padding-bottom: var(--spacing-1);
+}
+
+.pb-2 {
+  padding-bottom: var(--spacing-2);
+}
+
+.pb-3 {
+  padding-bottom: var(--spacing-3);
+}
+
+.pb-4 {
+  padding-bottom: var(--spacing-4);
+}
+
+.pb-5 {
+  padding-bottom: var(--spacing-5);
+}
+
+.pb-6 {
+  padding-bottom: var(--spacing-6);
+}
+
+.pb-8 {
+  padding-bottom: var(--spacing-8);
+}
+
+.pb-10 {
+  padding-bottom: var(--spacing-10);
+}
+
+.pb-12 {
+  padding-bottom: var(--spacing-12);
+}
+
+.pb-16 {
+  padding-bottom: var(--spacing-16);
+}
+
+.pb-20 {
+  padding-bottom: var(--spacing-20);
+}
+
+.pb-24 {
+  padding-bottom: var(--spacing-24);
+}
+
+/* Padding Left */
+.pl-0 {
+  padding-left: var(--spacing-0);
+}
+
+.pl-1 {
+  padding-left: var(--spacing-1);
+}
+
+.pl-2 {
+  padding-left: var(--spacing-2);
+}
+
+.pl-3 {
+  padding-left: var(--spacing-3);
+}
+
+.pl-4 {
+  padding-left: var(--spacing-4);
+}
+
+.pl-5 {
+  padding-left: var(--spacing-5);
+}
+
+.pl-6 {
+  padding-left: var(--spacing-6);
+}
+
+.pl-8 {
+  padding-left: var(--spacing-8);
+}
+
+.pl-10 {
+  padding-left: var(--spacing-10);
+}
+
+.pl-12 {
+  padding-left: var(--spacing-12);
+}
+
+.pl-16 {
+  padding-left: var(--spacing-16);
+}
+
+.pl-20 {
+  padding-left: var(--spacing-20);
+}
+
+.pl-24 {
+  padding-left: var(--spacing-24);
+}
+
+/* Display Utilities */
+.vd-d-none {
+  display: none;
+}
+
+.vd-d-inline {
+  display: inline;
+}
+
+.vd-d-inline-block {
+  display: inline-block;
+}
+
+.vd-d-block {
+  display: block;
+}
+
+.vd-d-table {
+  display: table;
+}
+
+.vd-d-table-row {
+  display: table-row;
+}
+
+.vd-d-table-cell {
+  display: table-cell;
+}
+
+.vd-d-flex {
+  display: flex;
+}
+
+.vd-d-inline-flex {
+  display: inline-flex;
+}
+
+.vd-d-grid {
+  display: grid;
+}
+
+.vd-d-inline-grid {
+  display: inline-grid;
+}
+
+/* Responsive Display */
+@media (min-width: 576px) {
+  .vd-d-sm-none {
+    display: none;
+  }
+
+  .vd-d-sm-inline {
+    display: inline;
+  }
+
+  .vd-d-sm-inline-block {
+    display: inline-block;
+  }
+
+  .vd-d-sm-block {
+    display: block;
+  }
+
+  .vd-d-sm-flex {
+    display: flex;
+  }
+
+  .vd-d-sm-inline-flex {
+    display: inline-flex;
+  }
+
+  .vd-d-sm-grid {
+    display: grid;
+  }
+}
+
+@media (min-width: 768px) {
+  .vd-d-md-none {
+    display: none;
+  }
+
+  .vd-d-md-inline {
+    display: inline;
+  }
+
+  .vd-d-md-inline-block {
+    display: inline-block;
+  }
+
+  .vd-d-md-block {
+    display: block;
+  }
+
+  .vd-d-md-flex {
+    display: flex;
+  }
+
+  .vd-d-md-inline-flex {
+    display: inline-flex;
+  }
+
+  .vd-d-md-grid {
+    display: grid;
+  }
+}
+
+@media (min-width: 992px) {
+  .vd-d-lg-none {
+    display: none;
+  }
+
+  .vd-d-lg-inline {
+    display: inline;
+  }
+
+  .vd-d-lg-inline-block {
+    display: inline-block;
+  }
+
+  .vd-d-lg-block {
+    display: block;
+  }
+
+  .vd-d-lg-flex {
+    display: flex;
+  }
+
+  .vd-d-lg-inline-flex {
+    display: inline-flex;
+  }
+
+  .vd-d-lg-grid {
+    display: grid;
+  }
+}
+
+@media (min-width: 1200px) {
+  .vd-d-xl-none {
+    display: none;
+  }
+
+  .vd-d-xl-inline {
+    display: inline;
+  }
+
+  .vd-d-xl-inline-block {
+    display: inline-block;
+  }
+
+  .vd-d-xl-block {
+    display: block;
+  }
+
+  .vd-d-xl-flex {
+    display: flex;
+  }
+
+  .vd-d-xl-inline-flex {
+    display: inline-flex;
+  }
+
+  .vd-d-xl-grid {
+    display: grid;
+  }
+}
+
+/* Position Utilities */
+.position-static {
+  position: static;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.position-sticky {
+  position: sticky;
+}
+
+/* Position Values */
+.top-0 {
+  top: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.left-0 {
+  left: 0;
+}
+
+/* Width Utilities */
+.w-auto {
+  width: auto;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.w-half {
+  width: 50%;
+}
+
+.w-third {
+  width: 33.333333%;
+}
+
+.w-two-thirds {
+  width: 66.666667%;
+}
+
+.w-quarter {
+  width: 25%;
+}
+
+.w-three-quarters {
+  width: 75%;
+}
+
+/* Golden Ratio Width Utilities */
+.w-phi-major {
+  width: 61.803399%;
+}
+
+.w-phi-minor {
+  width: 38.196601%;
+}
+
+.w-fib-987 {
+  max-width: 987px;
+}
+
+.w-fib-610 {
+  max-width: 610px;
+}
+
+.w-fib-377 {
+  max-width: 377px;
+}
+
+/* Height Utilities */
+.h-auto {
+  height: auto;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-half {
+  height: 50%;
+}
+
+.h-third {
+  height: 33.333333%;
+}
+
+.h-two-thirds {
+  height: 66.666667%;
+}
+
+.h-quarter {
+  height: 25%;
+}
+
+.h-three-quarters {
+  height: 75%;
+}
+
+/* Overflow Utilities */
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+/* Flexbox Utilities */
+.vd-flex-row,
+.flex-row {
+  flex-direction: row;
+}
+
+.vd-flex-row-reverse,
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.vd-flex-col,
+.flex-col {
+  flex-direction: column;
+}
+
+.vd-flex-col-reverse,
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.vd-flex-wrap,
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.vd-flex-nowrap,
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.vd-flex-wrap-reverse,
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
+/* Gap Utilities (for Grid and Flexbox) */
+.vd-gap-0 {
+  gap: var(--spacing-0);
+}
+
+.vd-gap-1 {
+  gap: var(--spacing-1);
+}
+
+.vd-gap-2 {
+  gap: var(--spacing-2);
+}
+
+.vd-gap-3 {
+  gap: var(--spacing-3);
+}
+
+.vd-gap-4 {
+  gap: var(--spacing-4);
+}
+
+.vd-gap-5 {
+  gap: var(--spacing-5);
+}
+
+.vd-gap-6 {
+  gap: var(--spacing-6);
+}
+
+.vd-gap-8 {
+  gap: var(--spacing-8);
+}
+
+.vd-gap-10 {
+  gap: var(--spacing-10);
+}
+
+.vd-gap-12 {
+  gap: var(--spacing-12);
+}
+
+/* Responsive Flex Direction */
+@media (min-width: 576px) {
+  .flex-sm-row {
+    flex-direction: row;
+  }
+
+  .flex-sm-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .flex-sm-col {
+    flex-direction: column;
+  }
+
+  .flex-sm-col-reverse {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (min-width: 768px) {
+  .flex-md-row {
+    flex-direction: row;
+  }
+
+  .flex-md-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .flex-md-col {
+    flex-direction: column;
+  }
+
+  .flex-md-col-reverse {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (min-width: 992px) {
+  .flex-lg-row {
+    flex-direction: row;
+  }
+
+  .flex-lg-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .flex-lg-col {
+    flex-direction: column;
+  }
+
+  .flex-lg-col-reverse {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (min-width: 1200px) {
+  .flex-xl-row {
+    flex-direction: row;
+  }
+
+  .flex-xl-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .flex-xl-col {
+    flex-direction: column;
+  }
+
+  .flex-xl-col-reverse {
+    flex-direction: column-reverse;
+  }
+}
+
+/* Responsive Gap */
+@media (min-width: 576px) {
+  .vd-gap-sm-0 {
+    gap: var(--spacing-0);
+  }
+
+  .vd-gap-sm-1 {
+    gap: var(--spacing-1);
+  }
+
+  .vd-gap-sm-2 {
+    gap: var(--spacing-2);
+  }
+
+  .vd-gap-sm-3 {
+    gap: var(--spacing-3);
+  }
+
+  .vd-gap-sm-4 {
+    gap: var(--spacing-4);
+  }
+
+  .vd-gap-sm-5 {
+    gap: var(--spacing-5);
+  }
+
+  .vd-gap-sm-6 {
+    gap: var(--spacing-6);
+  }
+
+  .vd-gap-sm-8 {
+    gap: var(--spacing-8);
+  }
+
+  .vd-gap-sm-10 {
+    gap: var(--spacing-10);
+  }
+
+  .vd-gap-sm-12 {
+    gap: var(--spacing-12);
+  }
+}
+
+@media (min-width: 768px) {
+  .vd-gap-md-0 {
+    gap: var(--spacing-0);
+  }
+
+  .vd-gap-md-1 {
+    gap: var(--spacing-1);
+  }
+
+  .vd-gap-md-2 {
+    gap: var(--spacing-2);
+  }
+
+  .vd-gap-md-3 {
+    gap: var(--spacing-3);
+  }
+
+  .vd-gap-md-4 {
+    gap: var(--spacing-4);
+  }
+
+  .vd-gap-md-5 {
+    gap: var(--spacing-5);
+  }
+
+  .vd-gap-md-6 {
+    gap: var(--spacing-6);
+  }
+
+  .vd-gap-md-8 {
+    gap: var(--spacing-8);
+  }
+
+  .vd-gap-md-10 {
+    gap: var(--spacing-10);
+  }
+
+  .vd-gap-md-12 {
+    gap: var(--spacing-12);
+  }
+}
+
+@media (min-width: 992px) {
+  .vd-gap-lg-0 {
+    gap: var(--spacing-0);
+  }
+
+  .vd-gap-lg-1 {
+    gap: var(--spacing-1);
+  }
+
+  .vd-gap-lg-2 {
+    gap: var(--spacing-2);
+  }
+
+  .vd-gap-lg-3 {
+    gap: var(--spacing-3);
+  }
+
+  .vd-gap-lg-4 {
+    gap: var(--spacing-4);
+  }
+
+  .vd-gap-lg-5 {
+    gap: var(--spacing-5);
+  }
+
+  .vd-gap-lg-6 {
+    gap: var(--spacing-6);
+  }
+
+  .vd-gap-lg-8 {
+    gap: var(--spacing-8);
+  }
+
+  .vd-gap-lg-10 {
+    gap: var(--spacing-10);
+  }
+
+  .vd-gap-lg-12 {
+    gap: var(--spacing-12);
+  }
+}
+
+@media (min-width: 1200px) {
+  .vd-gap-xl-0 {
+    gap: var(--spacing-0);
+  }
+
+  .vd-gap-xl-1 {
+    gap: var(--spacing-1);
+  }
+
+  .vd-gap-xl-2 {
+    gap: var(--spacing-2);
+  }
+
+  .vd-gap-xl-3 {
+    gap: var(--spacing-3);
+  }
+
+  .vd-gap-xl-4 {
+    gap: var(--spacing-4);
+  }
+
+  .vd-gap-xl-5 {
+    gap: var(--spacing-5);
+  }
+
+  .vd-gap-xl-6 {
+    gap: var(--spacing-6);
+  }
+
+  .vd-gap-xl-8 {
+    gap: var(--spacing-8);
+  }
+
+  .vd-gap-xl-10 {
+    gap: var(--spacing-10);
+  }
+
+  .vd-gap-xl-12 {
+    gap: var(--spacing-12);
+  }
+}
+
+/* Scroll Behavior Utilities */
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+.scroll-auto {
+  scroll-behavior: auto;
+}
+
+/* Visibility Utilities */
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+/* Cursor Utilities */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-wait {
+  cursor: wait;
+}
+
+.cursor-text {
+  cursor: text;
+}
+
+.cursor-move {
+  cursor: move;
+}
+
+/* User Select Utilities */
+.select-none {
+  user-select: none;
+}
+
+.select-text {
+  user-select: text;
+}
+
+.select-all {
+  user-select: all;
+}
+
+.select-auto {
+  user-select: auto;
+}
+
+/* Border Utilities */
+.vd-border,
+.border {
+  border: 1px solid var(--border-color);
+}
+
+.vd-border-0,
+.border-0 {
+  border: 0;
+}
+
+.vd-border-top,
+.border-top {
+  border-top: 1px solid var(--border-color);
+}
+
+.vd-border-right,
+.border-right {
+  border-right: 1px solid var(--border-color);
+}
+
+.vd-border-bottom,
+.border-bottom {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.vd-border-left,
+.border-left {
+  border-left: 1px solid var(--border-color);
+}
+
+.vd-border-2,
+.border-2 {
+  border-width: 2px;
+}
+
+.vd-border-4,
+.border-4 {
+  border-width: 4px;
+}
+
+.vd-border-8,
+.border-8 {
+  border-width: 8px;
+}
+
+/* Border Radius Utilities (Fibonacci: 2, 3, 5, 8, 13, 21) */
+.vd-rounded-none,
+.rounded-none {
+  border-radius: 0;
+}
+
+.vd-rounded-sm,
+.rounded-sm {
+  border-radius: var(--radius-fib-2);
+}
+
+/* 2px */
+.vd-rounded,
+.rounded {
+  border-radius: var(--radius-fib-3);
+}
+
+/* 3px */
+.vd-rounded-md,
+.rounded-md {
+  border-radius: var(--radius-fib-5);
+}
+
+/* 5px */
+.vd-rounded-lg,
+.rounded-lg {
+  border-radius: var(--radius-fib-8);
+}
+
+/* 8px */
+.vd-rounded-xl,
+.rounded-xl {
+  border-radius: var(--radius-fib-13);
+}
+
+/* 13px */
+.vd-rounded-2xl,
+.rounded-2xl {
+  border-radius: var(--radius-fib-21);
+}
+
+/* 21px */
+.vd-rounded-full,
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.vd-rounded-t,
+.rounded-t {
+  border-top-left-radius: var(--radius-fib-3);
+  border-top-right-radius: var(--radius-fib-3);
+}
+
+.vd-rounded-r,
+.rounded-r {
+  border-top-right-radius: var(--radius-fib-3);
+  border-bottom-right-radius: var(--radius-fib-3);
+}
+
+.vd-rounded-b,
+.rounded-b {
+  border-bottom-right-radius: var(--radius-fib-3);
+  border-bottom-left-radius: var(--radius-fib-3);
+}
+
+.vd-rounded-l,
+.rounded-l {
+  border-top-left-radius: var(--radius-fib-3);
+  border-bottom-left-radius: var(--radius-fib-3);
+}
+
+/* Directional margin aliases (vd- prefix) */
+.vd-mt-2 { margin-top: var(--spacing-2); }
+.vd-mt-3 { margin-top: var(--spacing-3); }
+.vd-mt-4 { margin-top: var(--spacing-4); }
+.vd-mt-5 { margin-top: var(--spacing-5); }
+.vd-mb-0 { margin-bottom: var(--spacing-0); }
+.vd-mb-2 { margin-bottom: var(--spacing-2); }
+.vd-mb-3 { margin-bottom: var(--spacing-3); }
+.vd-mb-4 { margin-bottom: var(--spacing-4); }
+.vd-mb-5 { margin-bottom: var(--spacing-5); }
+.vd-mb-8 { margin-bottom: var(--spacing-8); }
+.vd-mr-3 { margin-right: var(--spacing-3); }
+.vd-mr-6 { margin-right: var(--spacing-6); }
+.vd-ml-5 { margin-left: var(--spacing-5); }
+
+/* Responsive Spacing Utilities */
+@media (min-width: 576px) {
+  .vd-m-sm-0 {
+    margin: var(--spacing-0);
+  }
+
+  .vd-m-sm-1 {
+    margin: var(--spacing-1);
+  }
+
+  .vd-m-sm-2 {
+    margin: var(--spacing-2);
+  }
+
+  .vd-m-sm-3 {
+    margin: var(--spacing-3);
+  }
+
+  .vd-m-sm-4 {
+    margin: var(--spacing-4);
+  }
+
+  .vd-m-sm-5 {
+    margin: var(--spacing-5);
+  }
+
+  .vd-m-sm-6 {
+    margin: var(--spacing-6);
+  }
+
+  .vd-m-sm-auto {
+    margin: auto;
+  }
+
+  .mt-sm-0 {
+    margin-top: var(--spacing-0);
+  }
+
+  .mt-sm-4 {
+    margin-top: var(--spacing-4);
+  }
+
+  .mb-sm-0 {
+    margin-bottom: var(--spacing-0);
+  }
+
+  .mb-sm-4 {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .vd-p-sm-0 {
+    padding: var(--spacing-0);
+  }
+
+  .vd-p-sm-1 {
+    padding: var(--spacing-1);
+  }
+
+  .vd-p-sm-2 {
+    padding: var(--spacing-2);
+  }
+
+  .vd-p-sm-3 {
+    padding: var(--spacing-3);
+  }
+
+  .vd-p-sm-4 {
+    padding: var(--spacing-4);
+  }
+
+  .vd-p-sm-5 {
+    padding: var(--spacing-5);
+  }
+
+  .vd-p-sm-6 {
+    padding: var(--spacing-6);
+  }
+}
+
+@media (min-width: 768px) {
+  .vd-m-md-0 {
+    margin: var(--spacing-0);
+  }
+
+  .vd-m-md-1 {
+    margin: var(--spacing-1);
+  }
+
+  .vd-m-md-2 {
+    margin: var(--spacing-2);
+  }
+
+  .vd-m-md-3 {
+    margin: var(--spacing-3);
+  }
+
+  .vd-m-md-4 {
+    margin: var(--spacing-4);
+  }
+
+  .vd-m-md-5 {
+    margin: var(--spacing-5);
+  }
+
+  .vd-m-md-6 {
+    margin: var(--spacing-6);
+  }
+
+  .vd-m-md-auto {
+    margin: auto;
+  }
+
+  .mt-md-0 {
+    margin-top: var(--spacing-0);
+  }
+
+  .mt-md-4 {
+    margin-top: var(--spacing-4);
+  }
+
+  .mb-md-0 {
+    margin-bottom: var(--spacing-0);
+  }
+
+  .mb-md-4 {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .vd-p-md-0 {
+    padding: var(--spacing-0);
+  }
+
+  .vd-p-md-1 {
+    padding: var(--spacing-1);
+  }
+
+  .vd-p-md-2 {
+    padding: var(--spacing-2);
+  }
+
+  .vd-p-md-3 {
+    padding: var(--spacing-3);
+  }
+
+  .vd-p-md-4 {
+    padding: var(--spacing-4);
+  }
+
+  .vd-p-md-5 {
+    padding: var(--spacing-5);
+  }
+
+  .vd-p-md-6 {
+    padding: var(--spacing-6);
+  }
+}
+
+@media (min-width: 992px) {
+  .vd-m-lg-0 {
+    margin: var(--spacing-0);
+  }
+
+  .vd-m-lg-1 {
+    margin: var(--spacing-1);
+  }
+
+  .vd-m-lg-2 {
+    margin: var(--spacing-2);
+  }
+
+  .vd-m-lg-3 {
+    margin: var(--spacing-3);
+  }
+
+  .vd-m-lg-4 {
+    margin: var(--spacing-4);
+  }
+
+  .vd-m-lg-5 {
+    margin: var(--spacing-5);
+  }
+
+  .vd-m-lg-6 {
+    margin: var(--spacing-6);
+  }
+
+  .vd-m-lg-auto {
+    margin: auto;
+  }
+
+  .mt-lg-0 {
+    margin-top: var(--spacing-0);
+  }
+
+  .mt-lg-4 {
+    margin-top: var(--spacing-4);
+  }
+
+  .mb-lg-0 {
+    margin-bottom: var(--spacing-0);
+  }
+
+  .mb-lg-4 {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .vd-p-lg-0 {
+    padding: var(--spacing-0);
+  }
+
+  .vd-p-lg-1 {
+    padding: var(--spacing-1);
+  }
+
+  .vd-p-lg-2 {
+    padding: var(--spacing-2);
+  }
+
+  .vd-p-lg-3 {
+    padding: var(--spacing-3);
+  }
+
+  .vd-p-lg-4 {
+    padding: var(--spacing-4);
+  }
+
+  .vd-p-lg-5 {
+    padding: var(--spacing-5);
+  }
+
+  .vd-p-lg-6 {
+    padding: var(--spacing-6);
+  }
+}
+
+@media (min-width: 1200px) {
+  .vd-m-xl-0 {
+    margin: var(--spacing-0);
+  }
+
+  .vd-m-xl-1 {
+    margin: var(--spacing-1);
+  }
+
+  .vd-m-xl-2 {
+    margin: var(--spacing-2);
+  }
+
+  .vd-m-xl-3 {
+    margin: var(--spacing-3);
+  }
+
+  .vd-m-xl-4 {
+    margin: var(--spacing-4);
+  }
+
+  .vd-m-xl-5 {
+    margin: var(--spacing-5);
+  }
+
+  .vd-m-xl-6 {
+    margin: var(--spacing-6);
+  }
+
+  .vd-m-xl-auto {
+    margin: auto;
+  }
+
+  .mt-xl-0 {
+    margin-top: var(--spacing-0);
+  }
+
+  .mt-xl-4 {
+    margin-top: var(--spacing-4);
+  }
+
+  .mb-xl-0 {
+    margin-bottom: var(--spacing-0);
+  }
+
+  .mb-xl-4 {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .vd-p-xl-0 {
+    padding: var(--spacing-0);
+  }
+
+  .vd-p-xl-1 {
+    padding: var(--spacing-1);
+  }
+
+  .vd-p-xl-2 {
+    padding: var(--spacing-2);
+  }
+
+  .vd-p-xl-3 {
+    padding: var(--spacing-3);
+  }
+
+  .vd-p-xl-4 {
+    padding: var(--spacing-4);
+  }
+
+  .vd-p-xl-5 {
+    padding: var(--spacing-5);
+  }
+
+  .vd-p-xl-6 {
+    padding: var(--spacing-6);
+  }
+}
+
+/* Skip Link - Accessibility */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  z-index: 9999;
+  padding: 0.8125rem;
+  /* 13px - fib */
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  text-decoration: none;
+  font-weight: var(--font-weight-medium);
+}
+
+.skip-link:focus {
+  left: 0;
+  top: 0;
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Screen Reader Only - Visually hidden but accessible to assistive technology */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only-focusable:focus,
+.sr-only-focusable:active {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* Focus Visible Utilities */
+.focus-ring:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.focus-ring-inset:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.focus-ring-shadow:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 123, 255), 0.25);
+}
+
+/* Text Alignment Utilities */
+.vd-text-left {
+  text-align: left;
+}
+
+.vd-text-center {
+  text-align: center;
+}
+
+.vd-text-right {
+  text-align: right;
+}
+
+.vd-text-justify {
+  text-align: justify;
+}
+
+/* Text Transform Utilities */
+.vd-text-uppercase {
+  text-transform: uppercase;
+}
+
+.vd-text-lowercase {
+  text-transform: lowercase;
+}
+
+.vd-text-capitalize {
+  text-transform: capitalize;
+}
+
+.vd-text-normal-case {
+  text-transform: none;
+}
+
+/* Text Overflow Utilities */
+.vd-text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vd-text-nowrap {
+  white-space: nowrap;
+}
+
+.vd-text-wrap {
+  white-space: normal;
+}
+
+.vd-text-break {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Text Decoration Utilities */
+.vd-text-underline {
+  text-decoration: underline;
+}
+
+.vd-text-line-through {
+  text-decoration: line-through;
+}
+
+.vd-text-no-underline {
+  text-decoration: none;
+}
+
+/* Font Style Utilities */
+.vd-font-italic {
+  font-style: italic;
+}
+
+.vd-font-normal {
+  font-style: normal;
+}
+
+/* Responsive Text Alignment */
+@media (min-width: 576px) {
+  .vd-text-sm-left {
+    text-align: left;
+  }
+
+  .vd-text-sm-center {
+    text-align: center;
+  }
+
+  .vd-text-sm-right {
+    text-align: right;
+  }
+}
+
+@media (min-width: 768px) {
+  .vd-text-md-left {
+    text-align: left;
+  }
+
+  .vd-text-md-center {
+    text-align: center;
+  }
+
+  .vd-text-md-right {
+    text-align: right;
+  }
+}
+
+@media (min-width: 992px) {
+  .vd-text-lg-left {
+    text-align: left;
+  }
+
+  .vd-text-lg-center {
+    text-align: center;
+  }
+
+  .vd-text-lg-right {
+    text-align: right;
+  }
+}
+
+@media (min-width: 1200px) {
+  .vd-text-xl-left {
+    text-align: left;
+  }
+
+  .vd-text-xl-center {
+    text-align: center;
+  }
+
+  .vd-text-xl-right {
+    text-align: right;
+  }
+}
+
+/* Opacity Utilities */
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+/* Z-Index Utilities */
+.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-auto {
+  z-index: auto;
+}
+
+.z-negative {
+  z-index: -1;
+}
+
+/* Object Fit Utilities */
+.object-contain {
+  object-fit: contain;
+}
+
+.object-cover {
+  object-fit: cover;
+}
+
+.object-fill {
+  object-fit: fill;
+}
+
+.object-none {
+  object-fit: none;
+}
+
+.object-scale-down {
+  object-fit: scale-down;
+}
+
+/* Object Position Utilities */
+.object-center {
+  object-position: center;
+}
+
+.object-top {
+  object-position: top;
+}
+
+.object-bottom {
+  object-position: bottom;
+}
+
+.object-left {
+  object-position: left;
+}
+
+.object-right {
+  object-position: right;
+}
+
+/* Pointer Events Utilities */
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+/* Aspect Ratio Utilities */
+.aspect-auto {
+  aspect-ratio: auto;
+}
+
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
+.aspect-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.aspect-golden {
+  aspect-ratio: 1.618 / 1;
+}
+
+.aspect-golden-portrait {
+  aspect-ratio: 1 / 1.618;
+}
+
+/* ═════════════════════════════════════════════════════════════════════════
+ * DYNAMIC RADIUS SWITCHING (Theme Customizer)
+ * These rules remap --radius-fib-* variables based on [data-radius] attribute
+ * Values: 0, 0.125, 0.25, 0.375, 0.5 (rem multiplier)
+ * ═════════════════════════════════════════════════════════════════════════ */
+
+/* No radius (sharp corners) */
+[data-radius="0"] {
+  --radius-fib-2: 0;
+  --radius-fib-3: 0;
+  --radius-fib-5: 0;
+  --radius-fib-8: 0;
+  --radius-fib-13: 0;
+  --radius-fib-21: 0;
+}
+
+/* Extra small radius (0.125rem base) */
+[data-radius="0.125"] {
+  --radius-fib-2: 0.0625rem;   /* 1px */
+  --radius-fib-3: 0.09375rem;  /* 1.5px */
+  --radius-fib-5: 0.15625rem;  /* 2.5px */
+  --radius-fib-8: 0.25rem;     /* 4px */
+  --radius-fib-13: 0.40625rem; /* 6.5px */
+  --radius-fib-21: 0.65625rem; /* 10.5px */
+}
+
+/* Small radius (0.25rem base - default) */
+[data-radius="0.25"] {
+  --radius-fib-2: 0.125rem;    /* 2px */
+  --radius-fib-3: 0.1875rem;   /* 3px */
+  --radius-fib-5: 0.3125rem;   /* 5px */
+  --radius-fib-8: 0.5rem;      /* 8px */
+  --radius-fib-13: 0.8125rem;  /* 13px */
+  --radius-fib-21: 1.3125rem;  /* 21px */
+}
+
+/* Medium radius (0.375rem base) */
+[data-radius="0.375"] {
+  --radius-fib-2: 0.1875rem;   /* 3px */
+  --radius-fib-3: 0.28125rem;  /* 4.5px */
+  --radius-fib-5: 0.46875rem;  /* 7.5px */
+  --radius-fib-8: 0.75rem;     /* 12px */
+  --radius-fib-13: 1.21875rem; /* 19.5px */
+  --radius-fib-21: 1.96875rem; /* 31.5px */
+}
+
+/* Large radius (0.5rem base) */
+[data-radius="0.5"] {
+  --radius-fib-2: 0.25rem;     /* 4px */
+  --radius-fib-3: 0.375rem;    /* 6px */
+  --radius-fib-5: 0.625rem;    /* 10px */
+  --radius-fib-8: 1rem;        /* 16px */
+  --radius-fib-13: 1.625rem;   /* 26px */
+  --radius-fib-21: 2.625rem;   /* 42px */
+}