@aquera/nile-elements 1.7.7 → 1.7.9

package/demo/utilities.css

@@ -0,0 +1,662 @@
+/**
+ * Do not edit directly
+ * Generated by build-utilities.mjs
+ */
+
+
+/* ============================================================
+   Spacing — padding, margin, gap
+   ============================================================ */
+
+/* none: 0px */
+.p-none     { padding: var(--nile-spacing-none); }
+.pt-none    { padding-top: var(--nile-spacing-none); }
+.pr-none    { padding-right: var(--nile-spacing-none); }
+.pb-none    { padding-bottom: var(--nile-spacing-none); }
+.pl-none    { padding-left: var(--nile-spacing-none); }
+.px-none    { padding-left: var(--nile-spacing-none); padding-right: var(--nile-spacing-none); }
+.py-none    { padding-top: var(--nile-spacing-none); padding-bottom: var(--nile-spacing-none); }
+.m-none     { margin: var(--nile-spacing-none); }
+.mt-none    { margin-top: var(--nile-spacing-none); }
+.mr-none    { margin-right: var(--nile-spacing-none); }
+.mb-none    { margin-bottom: var(--nile-spacing-none); }
+.ml-none    { margin-left: var(--nile-spacing-none); }
+.mx-none    { margin-left: var(--nile-spacing-none); margin-right: var(--nile-spacing-none); }
+.my-none    { margin-top: var(--nile-spacing-none); margin-bottom: var(--nile-spacing-none); }
+.gap-none   { gap: var(--nile-spacing-none); }
+.gap-x-none { column-gap: var(--nile-spacing-none); }
+.gap-y-none { row-gap: var(--nile-spacing-none); }
+
+/* xxs: 2px */
+.p-xxs     { padding: var(--nile-spacing-xxs); }
+.pt-xxs    { padding-top: var(--nile-spacing-xxs); }
+.pr-xxs    { padding-right: var(--nile-spacing-xxs); }
+.pb-xxs    { padding-bottom: var(--nile-spacing-xxs); }
+.pl-xxs    { padding-left: var(--nile-spacing-xxs); }
+.px-xxs    { padding-left: var(--nile-spacing-xxs); padding-right: var(--nile-spacing-xxs); }
+.py-xxs    { padding-top: var(--nile-spacing-xxs); padding-bottom: var(--nile-spacing-xxs); }
+.m-xxs     { margin: var(--nile-spacing-xxs); }
+.mt-xxs    { margin-top: var(--nile-spacing-xxs); }
+.mr-xxs    { margin-right: var(--nile-spacing-xxs); }
+.mb-xxs    { margin-bottom: var(--nile-spacing-xxs); }
+.ml-xxs    { margin-left: var(--nile-spacing-xxs); }
+.mx-xxs    { margin-left: var(--nile-spacing-xxs); margin-right: var(--nile-spacing-xxs); }
+.my-xxs    { margin-top: var(--nile-spacing-xxs); margin-bottom: var(--nile-spacing-xxs); }
+.gap-xxs   { gap: var(--nile-spacing-xxs); }
+.gap-x-xxs { column-gap: var(--nile-spacing-xxs); }
+.gap-y-xxs { row-gap: var(--nile-spacing-xxs); }
+
+/* xs: 4px */
+.p-xs     { padding: var(--nile-spacing-xs); }
+.pt-xs    { padding-top: var(--nile-spacing-xs); }
+.pr-xs    { padding-right: var(--nile-spacing-xs); }
+.pb-xs    { padding-bottom: var(--nile-spacing-xs); }
+.pl-xs    { padding-left: var(--nile-spacing-xs); }
+.px-xs    { padding-left: var(--nile-spacing-xs); padding-right: var(--nile-spacing-xs); }
+.py-xs    { padding-top: var(--nile-spacing-xs); padding-bottom: var(--nile-spacing-xs); }
+.m-xs     { margin: var(--nile-spacing-xs); }
+.mt-xs    { margin-top: var(--nile-spacing-xs); }
+.mr-xs    { margin-right: var(--nile-spacing-xs); }
+.mb-xs    { margin-bottom: var(--nile-spacing-xs); }
+.ml-xs    { margin-left: var(--nile-spacing-xs); }
+.mx-xs    { margin-left: var(--nile-spacing-xs); margin-right: var(--nile-spacing-xs); }
+.my-xs    { margin-top: var(--nile-spacing-xs); margin-bottom: var(--nile-spacing-xs); }
+.gap-xs   { gap: var(--nile-spacing-xs); }
+.gap-x-xs { column-gap: var(--nile-spacing-xs); }
+.gap-y-xs { row-gap: var(--nile-spacing-xs); }
+
+/* sm: 6px */
+.p-sm     { padding: var(--nile-spacing-sm); }
+.pt-sm    { padding-top: var(--nile-spacing-sm); }
+.pr-sm    { padding-right: var(--nile-spacing-sm); }
+.pb-sm    { padding-bottom: var(--nile-spacing-sm); }
+.pl-sm    { padding-left: var(--nile-spacing-sm); }
+.px-sm    { padding-left: var(--nile-spacing-sm); padding-right: var(--nile-spacing-sm); }
+.py-sm    { padding-top: var(--nile-spacing-sm); padding-bottom: var(--nile-spacing-sm); }
+.m-sm     { margin: var(--nile-spacing-sm); }
+.mt-sm    { margin-top: var(--nile-spacing-sm); }
+.mr-sm    { margin-right: var(--nile-spacing-sm); }
+.mb-sm    { margin-bottom: var(--nile-spacing-sm); }
+.ml-sm    { margin-left: var(--nile-spacing-sm); }
+.mx-sm    { margin-left: var(--nile-spacing-sm); margin-right: var(--nile-spacing-sm); }
+.my-sm    { margin-top: var(--nile-spacing-sm); margin-bottom: var(--nile-spacing-sm); }
+.gap-sm   { gap: var(--nile-spacing-sm); }
+.gap-x-sm { column-gap: var(--nile-spacing-sm); }
+.gap-y-sm { row-gap: var(--nile-spacing-sm); }
+
+/* md: 8px */
+.p-md     { padding: var(--nile-spacing-md); }
+.pt-md    { padding-top: var(--nile-spacing-md); }
+.pr-md    { padding-right: var(--nile-spacing-md); }
+.pb-md    { padding-bottom: var(--nile-spacing-md); }
+.pl-md    { padding-left: var(--nile-spacing-md); }
+.px-md    { padding-left: var(--nile-spacing-md); padding-right: var(--nile-spacing-md); }
+.py-md    { padding-top: var(--nile-spacing-md); padding-bottom: var(--nile-spacing-md); }
+.m-md     { margin: var(--nile-spacing-md); }
+.mt-md    { margin-top: var(--nile-spacing-md); }
+.mr-md    { margin-right: var(--nile-spacing-md); }
+.mb-md    { margin-bottom: var(--nile-spacing-md); }
+.ml-md    { margin-left: var(--nile-spacing-md); }
+.mx-md    { margin-left: var(--nile-spacing-md); margin-right: var(--nile-spacing-md); }
+.my-md    { margin-top: var(--nile-spacing-md); margin-bottom: var(--nile-spacing-md); }
+.gap-md   { gap: var(--nile-spacing-md); }
+.gap-x-md { column-gap: var(--nile-spacing-md); }
+.gap-y-md { row-gap: var(--nile-spacing-md); }
+
+/* lg: 12px */
+.p-lg     { padding: var(--nile-spacing-lg); }
+.pt-lg    { padding-top: var(--nile-spacing-lg); }
+.pr-lg    { padding-right: var(--nile-spacing-lg); }
+.pb-lg    { padding-bottom: var(--nile-spacing-lg); }
+.pl-lg    { padding-left: var(--nile-spacing-lg); }
+.px-lg    { padding-left: var(--nile-spacing-lg); padding-right: var(--nile-spacing-lg); }
+.py-lg    { padding-top: var(--nile-spacing-lg); padding-bottom: var(--nile-spacing-lg); }
+.m-lg     { margin: var(--nile-spacing-lg); }
+.mt-lg    { margin-top: var(--nile-spacing-lg); }
+.mr-lg    { margin-right: var(--nile-spacing-lg); }
+.mb-lg    { margin-bottom: var(--nile-spacing-lg); }
+.ml-lg    { margin-left: var(--nile-spacing-lg); }
+.mx-lg    { margin-left: var(--nile-spacing-lg); margin-right: var(--nile-spacing-lg); }
+.my-lg    { margin-top: var(--nile-spacing-lg); margin-bottom: var(--nile-spacing-lg); }
+.gap-lg   { gap: var(--nile-spacing-lg); }
+.gap-x-lg { column-gap: var(--nile-spacing-lg); }
+.gap-y-lg { row-gap: var(--nile-spacing-lg); }
+
+/* xl: 16px */
+.p-xl     { padding: var(--nile-spacing-xl); }
+.pt-xl    { padding-top: var(--nile-spacing-xl); }
+.pr-xl    { padding-right: var(--nile-spacing-xl); }
+.pb-xl    { padding-bottom: var(--nile-spacing-xl); }
+.pl-xl    { padding-left: var(--nile-spacing-xl); }
+.px-xl    { padding-left: var(--nile-spacing-xl); padding-right: var(--nile-spacing-xl); }
+.py-xl    { padding-top: var(--nile-spacing-xl); padding-bottom: var(--nile-spacing-xl); }
+.m-xl     { margin: var(--nile-spacing-xl); }
+.mt-xl    { margin-top: var(--nile-spacing-xl); }
+.mr-xl    { margin-right: var(--nile-spacing-xl); }
+.mb-xl    { margin-bottom: var(--nile-spacing-xl); }
+.ml-xl    { margin-left: var(--nile-spacing-xl); }
+.mx-xl    { margin-left: var(--nile-spacing-xl); margin-right: var(--nile-spacing-xl); }
+.my-xl    { margin-top: var(--nile-spacing-xl); margin-bottom: var(--nile-spacing-xl); }
+.gap-xl   { gap: var(--nile-spacing-xl); }
+.gap-x-xl { column-gap: var(--nile-spacing-xl); }
+.gap-y-xl { row-gap: var(--nile-spacing-xl); }
+
+/* 2xl: 20px */
+.p-2xl     { padding: var(--nile-spacing-2xl); }
+.pt-2xl    { padding-top: var(--nile-spacing-2xl); }
+.pr-2xl    { padding-right: var(--nile-spacing-2xl); }
+.pb-2xl    { padding-bottom: var(--nile-spacing-2xl); }
+.pl-2xl    { padding-left: var(--nile-spacing-2xl); }
+.px-2xl    { padding-left: var(--nile-spacing-2xl); padding-right: var(--nile-spacing-2xl); }
+.py-2xl    { padding-top: var(--nile-spacing-2xl); padding-bottom: var(--nile-spacing-2xl); }
+.m-2xl     { margin: var(--nile-spacing-2xl); }
+.mt-2xl    { margin-top: var(--nile-spacing-2xl); }
+.mr-2xl    { margin-right: var(--nile-spacing-2xl); }
+.mb-2xl    { margin-bottom: var(--nile-spacing-2xl); }
+.ml-2xl    { margin-left: var(--nile-spacing-2xl); }
+.mx-2xl    { margin-left: var(--nile-spacing-2xl); margin-right: var(--nile-spacing-2xl); }
+.my-2xl    { margin-top: var(--nile-spacing-2xl); margin-bottom: var(--nile-spacing-2xl); }
+.gap-2xl   { gap: var(--nile-spacing-2xl); }
+.gap-x-2xl { column-gap: var(--nile-spacing-2xl); }
+.gap-y-2xl { row-gap: var(--nile-spacing-2xl); }
+
+/* 3xl: 24px */
+.p-3xl     { padding: var(--nile-spacing-3xl); }
+.pt-3xl    { padding-top: var(--nile-spacing-3xl); }
+.pr-3xl    { padding-right: var(--nile-spacing-3xl); }
+.pb-3xl    { padding-bottom: var(--nile-spacing-3xl); }
+.pl-3xl    { padding-left: var(--nile-spacing-3xl); }
+.px-3xl    { padding-left: var(--nile-spacing-3xl); padding-right: var(--nile-spacing-3xl); }
+.py-3xl    { padding-top: var(--nile-spacing-3xl); padding-bottom: var(--nile-spacing-3xl); }
+.m-3xl     { margin: var(--nile-spacing-3xl); }
+.mt-3xl    { margin-top: var(--nile-spacing-3xl); }
+.mr-3xl    { margin-right: var(--nile-spacing-3xl); }
+.mb-3xl    { margin-bottom: var(--nile-spacing-3xl); }
+.ml-3xl    { margin-left: var(--nile-spacing-3xl); }
+.mx-3xl    { margin-left: var(--nile-spacing-3xl); margin-right: var(--nile-spacing-3xl); }
+.my-3xl    { margin-top: var(--nile-spacing-3xl); margin-bottom: var(--nile-spacing-3xl); }
+.gap-3xl   { gap: var(--nile-spacing-3xl); }
+.gap-x-3xl { column-gap: var(--nile-spacing-3xl); }
+.gap-y-3xl { row-gap: var(--nile-spacing-3xl); }
+
+/* 4xl: 32px */
+.p-4xl     { padding: var(--nile-spacing-4xl); }
+.pt-4xl    { padding-top: var(--nile-spacing-4xl); }
+.pr-4xl    { padding-right: var(--nile-spacing-4xl); }
+.pb-4xl    { padding-bottom: var(--nile-spacing-4xl); }
+.pl-4xl    { padding-left: var(--nile-spacing-4xl); }
+.px-4xl    { padding-left: var(--nile-spacing-4xl); padding-right: var(--nile-spacing-4xl); }
+.py-4xl    { padding-top: var(--nile-spacing-4xl); padding-bottom: var(--nile-spacing-4xl); }
+.m-4xl     { margin: var(--nile-spacing-4xl); }
+.mt-4xl    { margin-top: var(--nile-spacing-4xl); }
+.mr-4xl    { margin-right: var(--nile-spacing-4xl); }
+.mb-4xl    { margin-bottom: var(--nile-spacing-4xl); }
+.ml-4xl    { margin-left: var(--nile-spacing-4xl); }
+.mx-4xl    { margin-left: var(--nile-spacing-4xl); margin-right: var(--nile-spacing-4xl); }
+.my-4xl    { margin-top: var(--nile-spacing-4xl); margin-bottom: var(--nile-spacing-4xl); }
+.gap-4xl   { gap: var(--nile-spacing-4xl); }
+.gap-x-4xl { column-gap: var(--nile-spacing-4xl); }
+.gap-y-4xl { row-gap: var(--nile-spacing-4xl); }
+
+/* 5xl: 40px */
+.p-5xl     { padding: var(--nile-spacing-5xl); }
+.pt-5xl    { padding-top: var(--nile-spacing-5xl); }
+.pr-5xl    { padding-right: var(--nile-spacing-5xl); }
+.pb-5xl    { padding-bottom: var(--nile-spacing-5xl); }
+.pl-5xl    { padding-left: var(--nile-spacing-5xl); }
+.px-5xl    { padding-left: var(--nile-spacing-5xl); padding-right: var(--nile-spacing-5xl); }
+.py-5xl    { padding-top: var(--nile-spacing-5xl); padding-bottom: var(--nile-spacing-5xl); }
+.m-5xl     { margin: var(--nile-spacing-5xl); }
+.mt-5xl    { margin-top: var(--nile-spacing-5xl); }
+.mr-5xl    { margin-right: var(--nile-spacing-5xl); }
+.mb-5xl    { margin-bottom: var(--nile-spacing-5xl); }
+.ml-5xl    { margin-left: var(--nile-spacing-5xl); }
+.mx-5xl    { margin-left: var(--nile-spacing-5xl); margin-right: var(--nile-spacing-5xl); }
+.my-5xl    { margin-top: var(--nile-spacing-5xl); margin-bottom: var(--nile-spacing-5xl); }
+.gap-5xl   { gap: var(--nile-spacing-5xl); }
+.gap-x-5xl { column-gap: var(--nile-spacing-5xl); }
+.gap-y-5xl { row-gap: var(--nile-spacing-5xl); }
+
+/* 6xl: 48px */
+.p-6xl     { padding: var(--nile-spacing-6xl); }
+.pt-6xl    { padding-top: var(--nile-spacing-6xl); }
+.pr-6xl    { padding-right: var(--nile-spacing-6xl); }
+.pb-6xl    { padding-bottom: var(--nile-spacing-6xl); }
+.pl-6xl    { padding-left: var(--nile-spacing-6xl); }
+.px-6xl    { padding-left: var(--nile-spacing-6xl); padding-right: var(--nile-spacing-6xl); }
+.py-6xl    { padding-top: var(--nile-spacing-6xl); padding-bottom: var(--nile-spacing-6xl); }
+.m-6xl     { margin: var(--nile-spacing-6xl); }
+.mt-6xl    { margin-top: var(--nile-spacing-6xl); }
+.mr-6xl    { margin-right: var(--nile-spacing-6xl); }
+.mb-6xl    { margin-bottom: var(--nile-spacing-6xl); }
+.ml-6xl    { margin-left: var(--nile-spacing-6xl); }
+.mx-6xl    { margin-left: var(--nile-spacing-6xl); margin-right: var(--nile-spacing-6xl); }
+.my-6xl    { margin-top: var(--nile-spacing-6xl); margin-bottom: var(--nile-spacing-6xl); }
+.gap-6xl   { gap: var(--nile-spacing-6xl); }
+.gap-x-6xl { column-gap: var(--nile-spacing-6xl); }
+.gap-y-6xl { row-gap: var(--nile-spacing-6xl); }
+
+/* 7xl: 64px */
+.p-7xl     { padding: var(--nile-spacing-7xl); }
+.pt-7xl    { padding-top: var(--nile-spacing-7xl); }
+.pr-7xl    { padding-right: var(--nile-spacing-7xl); }
+.pb-7xl    { padding-bottom: var(--nile-spacing-7xl); }
+.pl-7xl    { padding-left: var(--nile-spacing-7xl); }
+.px-7xl    { padding-left: var(--nile-spacing-7xl); padding-right: var(--nile-spacing-7xl); }
+.py-7xl    { padding-top: var(--nile-spacing-7xl); padding-bottom: var(--nile-spacing-7xl); }
+.m-7xl     { margin: var(--nile-spacing-7xl); }
+.mt-7xl    { margin-top: var(--nile-spacing-7xl); }
+.mr-7xl    { margin-right: var(--nile-spacing-7xl); }
+.mb-7xl    { margin-bottom: var(--nile-spacing-7xl); }
+.ml-7xl    { margin-left: var(--nile-spacing-7xl); }
+.mx-7xl    { margin-left: var(--nile-spacing-7xl); margin-right: var(--nile-spacing-7xl); }
+.my-7xl    { margin-top: var(--nile-spacing-7xl); margin-bottom: var(--nile-spacing-7xl); }
+.gap-7xl   { gap: var(--nile-spacing-7xl); }
+.gap-x-7xl { column-gap: var(--nile-spacing-7xl); }
+.gap-y-7xl { row-gap: var(--nile-spacing-7xl); }
+
+/* 8xl: 80px */
+.p-8xl     { padding: var(--nile-spacing-8xl); }
+.pt-8xl    { padding-top: var(--nile-spacing-8xl); }
+.pr-8xl    { padding-right: var(--nile-spacing-8xl); }
+.pb-8xl    { padding-bottom: var(--nile-spacing-8xl); }
+.pl-8xl    { padding-left: var(--nile-spacing-8xl); }
+.px-8xl    { padding-left: var(--nile-spacing-8xl); padding-right: var(--nile-spacing-8xl); }
+.py-8xl    { padding-top: var(--nile-spacing-8xl); padding-bottom: var(--nile-spacing-8xl); }
+.m-8xl     { margin: var(--nile-spacing-8xl); }
+.mt-8xl    { margin-top: var(--nile-spacing-8xl); }
+.mr-8xl    { margin-right: var(--nile-spacing-8xl); }
+.mb-8xl    { margin-bottom: var(--nile-spacing-8xl); }
+.ml-8xl    { margin-left: var(--nile-spacing-8xl); }
+.mx-8xl    { margin-left: var(--nile-spacing-8xl); margin-right: var(--nile-spacing-8xl); }
+.my-8xl    { margin-top: var(--nile-spacing-8xl); margin-bottom: var(--nile-spacing-8xl); }
+.gap-8xl   { gap: var(--nile-spacing-8xl); }
+.gap-x-8xl { column-gap: var(--nile-spacing-8xl); }
+.gap-y-8xl { row-gap: var(--nile-spacing-8xl); }
+
+/* 9xl: 96px */
+.p-9xl     { padding: var(--nile-spacing-9xl); }
+.pt-9xl    { padding-top: var(--nile-spacing-9xl); }
+.pr-9xl    { padding-right: var(--nile-spacing-9xl); }
+.pb-9xl    { padding-bottom: var(--nile-spacing-9xl); }
+.pl-9xl    { padding-left: var(--nile-spacing-9xl); }
+.px-9xl    { padding-left: var(--nile-spacing-9xl); padding-right: var(--nile-spacing-9xl); }
+.py-9xl    { padding-top: var(--nile-spacing-9xl); padding-bottom: var(--nile-spacing-9xl); }
+.m-9xl     { margin: var(--nile-spacing-9xl); }
+.mt-9xl    { margin-top: var(--nile-spacing-9xl); }
+.mr-9xl    { margin-right: var(--nile-spacing-9xl); }
+.mb-9xl    { margin-bottom: var(--nile-spacing-9xl); }
+.ml-9xl    { margin-left: var(--nile-spacing-9xl); }
+.mx-9xl    { margin-left: var(--nile-spacing-9xl); margin-right: var(--nile-spacing-9xl); }
+.my-9xl    { margin-top: var(--nile-spacing-9xl); margin-bottom: var(--nile-spacing-9xl); }
+.gap-9xl   { gap: var(--nile-spacing-9xl); }
+.gap-x-9xl { column-gap: var(--nile-spacing-9xl); }
+.gap-y-9xl { row-gap: var(--nile-spacing-9xl); }
+
+/* 10xl: 128px */
+.p-10xl     { padding: var(--nile-spacing-10xl); }
+.pt-10xl    { padding-top: var(--nile-spacing-10xl); }
+.pr-10xl    { padding-right: var(--nile-spacing-10xl); }
+.pb-10xl    { padding-bottom: var(--nile-spacing-10xl); }
+.pl-10xl    { padding-left: var(--nile-spacing-10xl); }
+.px-10xl    { padding-left: var(--nile-spacing-10xl); padding-right: var(--nile-spacing-10xl); }
+.py-10xl    { padding-top: var(--nile-spacing-10xl); padding-bottom: var(--nile-spacing-10xl); }
+.m-10xl     { margin: var(--nile-spacing-10xl); }
+.mt-10xl    { margin-top: var(--nile-spacing-10xl); }
+.mr-10xl    { margin-right: var(--nile-spacing-10xl); }
+.mb-10xl    { margin-bottom: var(--nile-spacing-10xl); }
+.ml-10xl    { margin-left: var(--nile-spacing-10xl); }
+.mx-10xl    { margin-left: var(--nile-spacing-10xl); margin-right: var(--nile-spacing-10xl); }
+.my-10xl    { margin-top: var(--nile-spacing-10xl); margin-bottom: var(--nile-spacing-10xl); }
+.gap-10xl   { gap: var(--nile-spacing-10xl); }
+.gap-x-10xl { column-gap: var(--nile-spacing-10xl); }
+.gap-y-10xl { row-gap: var(--nile-spacing-10xl); }
+
+/* 11xl: 160px */
+.p-11xl     { padding: var(--nile-spacing-11xl); }
+.pt-11xl    { padding-top: var(--nile-spacing-11xl); }
+.pr-11xl    { padding-right: var(--nile-spacing-11xl); }
+.pb-11xl    { padding-bottom: var(--nile-spacing-11xl); }
+.pl-11xl    { padding-left: var(--nile-spacing-11xl); }
+.px-11xl    { padding-left: var(--nile-spacing-11xl); padding-right: var(--nile-spacing-11xl); }
+.py-11xl    { padding-top: var(--nile-spacing-11xl); padding-bottom: var(--nile-spacing-11xl); }
+.m-11xl     { margin: var(--nile-spacing-11xl); }
+.mt-11xl    { margin-top: var(--nile-spacing-11xl); }
+.mr-11xl    { margin-right: var(--nile-spacing-11xl); }
+.mb-11xl    { margin-bottom: var(--nile-spacing-11xl); }
+.ml-11xl    { margin-left: var(--nile-spacing-11xl); }
+.mx-11xl    { margin-left: var(--nile-spacing-11xl); margin-right: var(--nile-spacing-11xl); }
+.my-11xl    { margin-top: var(--nile-spacing-11xl); margin-bottom: var(--nile-spacing-11xl); }
+.gap-11xl   { gap: var(--nile-spacing-11xl); }
+.gap-x-11xl { column-gap: var(--nile-spacing-11xl); }
+.gap-y-11xl { row-gap: var(--nile-spacing-11xl); }
+
+/* ============================================================
+   Colors — text, background, border
+   ============================================================ */
+
+/* primary-100: rgba(0, 94, 166, 0.1) */
+.text-primary-100   { color: var(--nile-colors-primary-100); }
+.bg-primary-100     { background-color: var(--nile-colors-primary-100); }
+.border-primary-100 { border-color: var(--nile-colors-primary-100); }
+
+/* primary-400: rgba(0, 94, 166, 0.25) */
+.text-primary-400   { color: var(--nile-colors-primary-400); }
+.bg-primary-400     { background-color: var(--nile-colors-primary-400); }
+.border-primary-400 { border-color: var(--nile-colors-primary-400); }
+
+/* primary-500: #80AED3 */
+.text-primary-500   { color: var(--nile-colors-primary-500); }
+.bg-primary-500     { background-color: var(--nile-colors-primary-500); }
+.border-primary-500 { border-color: var(--nile-colors-primary-500); }
+
+/* primary-600: #005EA6 */
+.text-primary-600   { color: var(--nile-colors-primary-600); }
+.bg-primary-600     { background-color: var(--nile-colors-primary-600); }
+.border-primary-600 { border-color: var(--nile-colors-primary-600); }
+
+/* primary-700: #005291 */
+.text-primary-700   { color: var(--nile-colors-primary-700); }
+.bg-primary-700     { background-color: var(--nile-colors-primary-700); }
+.border-primary-700 { border-color: var(--nile-colors-primary-700); }
+
+/* primary-900: #002F53 */
+.text-primary-900   { color: var(--nile-colors-primary-900); }
+.bg-primary-900     { background-color: var(--nile-colors-primary-900); }
+.border-primary-900 { border-color: var(--nile-colors-primary-900); }
+
+/* dark-100: rgba(0, 0, 0, 0.1) */
+.text-dark-100   { color: var(--nile-colors-dark-100); }
+.bg-dark-100     { background-color: var(--nile-colors-dark-100); }
+.border-dark-100 { border-color: var(--nile-colors-dark-100); }
+
+/* dark-200: #F5F7F7 */
+.text-dark-200   { color: var(--nile-colors-dark-200); }
+.bg-dark-200     { background-color: var(--nile-colors-dark-200); }
+.border-dark-200 { border-color: var(--nile-colors-dark-200); }
+
+/* dark-500: #7F7F7F */
+.text-dark-500   { color: var(--nile-colors-dark-500); }
+.bg-dark-500     { background-color: var(--nile-colors-dark-500); }
+.border-dark-500 { border-color: var(--nile-colors-dark-500); }
+
+/* dark-900: #000000 */
+.text-dark-900   { color: var(--nile-colors-dark-900); }
+.bg-dark-900     { background-color: var(--nile-colors-dark-900); }
+.border-dark-900 { border-color: var(--nile-colors-dark-900); }
+
+/* red-100: #FEF6F7 */
+.text-red-100   { color: var(--nile-colors-red-100); }
+.bg-red-100     { background-color: var(--nile-colors-red-100); }
+.border-red-100 { border-color: var(--nile-colors-red-100); }
+
+/* red-400: #F3A5AA */
+.text-red-400   { color: var(--nile-colors-red-400); }
+.bg-red-400     { background-color: var(--nile-colors-red-400); }
+.border-red-400 { border-color: var(--nile-colors-red-400); }
+
+/* red-500: #E5434D */
+.text-red-500   { color: var(--nile-colors-red-500); }
+.bg-red-500     { background-color: var(--nile-colors-red-500); }
+.border-red-500 { border-color: var(--nile-colors-red-500); }
+
+/* red-700: #A4121C */
+.text-red-700   { color: var(--nile-colors-red-700); }
+.bg-red-700     { background-color: var(--nile-colors-red-700); }
+.border-red-700 { border-color: var(--nile-colors-red-700); }
+
+/* blue-100: #F5FAFE */
+.text-blue-100   { color: var(--nile-colors-blue-100); }
+.bg-blue-100     { background-color: var(--nile-colors-blue-100); }
+.border-blue-100 { border-color: var(--nile-colors-blue-100); }
+
+/* blue-400: #A5D3F3 */
+.text-blue-400   { color: var(--nile-colors-blue-400); }
+.bg-blue-400     { background-color: var(--nile-colors-blue-400); }
+.border-blue-400 { border-color: var(--nile-colors-blue-400); }
+
+/* blue-500: #42A3E5 */
+.text-blue-500   { color: var(--nile-colors-blue-500); }
+.bg-blue-500     { background-color: var(--nile-colors-blue-500); }
+.border-blue-500 { border-color: var(--nile-colors-blue-500); }
+
+/* blue-700: #1978B8 */
+.text-blue-700   { color: var(--nile-colors-blue-700); }
+.bg-blue-700     { background-color: var(--nile-colors-blue-700); }
+.border-blue-700 { border-color: var(--nile-colors-blue-700); }
+
+/* yellow-100: #FEFCF6 */
+.text-yellow-100   { color: var(--nile-colors-yellow-100); }
+.bg-yellow-100     { background-color: var(--nile-colors-yellow-100); }
+.border-yellow-100 { border-color: var(--nile-colors-yellow-100); }
+
+/* yellow-400: #F3E0A5 */
+.text-yellow-400   { color: var(--nile-colors-yellow-400); }
+.bg-yellow-400     { background-color: var(--nile-colors-yellow-400); }
+.border-yellow-400 { border-color: var(--nile-colors-yellow-400); }
+
+/* yellow-500: #E5BF43 */
+.text-yellow-500   { color: var(--nile-colors-yellow-500); }
+.bg-yellow-500     { background-color: var(--nile-colors-yellow-500); }
+.border-yellow-500 { border-color: var(--nile-colors-yellow-500); }
+
+/* yellow-700: #B89219 */
+.text-yellow-700   { color: var(--nile-colors-yellow-700); }
+.bg-yellow-700     { background-color: var(--nile-colors-yellow-700); }
+.border-yellow-700 { border-color: var(--nile-colors-yellow-700); }
+
+/* green-100: #F6FEFC */
+.text-green-100   { color: var(--nile-colors-green-100); }
+.bg-green-100     { background-color: var(--nile-colors-green-100); }
+.border-green-100 { border-color: var(--nile-colors-green-100); }
+
+/* green-400: #A5F3E1 */
+.text-green-400   { color: var(--nile-colors-green-400); }
+.bg-green-400     { background-color: var(--nile-colors-green-400); }
+.border-green-400 { border-color: var(--nile-colors-green-400); }
+
+/* green-500: #43E5C0 */
+.text-green-500   { color: var(--nile-colors-green-500); }
+.bg-green-500     { background-color: var(--nile-colors-green-500); }
+.border-green-500 { border-color: var(--nile-colors-green-500); }
+
+/* green-700: #19B893 */
+.text-green-700   { color: var(--nile-colors-green-700); }
+.bg-green-700     { background-color: var(--nile-colors-green-700); }
+.border-green-700 { border-color: var(--nile-colors-green-700); }
+
+/* neutral-100: #FAFAFA */
+.text-neutral-100   { color: var(--nile-colors-neutral-100); }
+.bg-neutral-100     { background-color: var(--nile-colors-neutral-100); }
+.border-neutral-100 { border-color: var(--nile-colors-neutral-100); }
+
+/* neutral-400: #E6E9EB */
+.text-neutral-400   { color: var(--nile-colors-neutral-400); }
+.bg-neutral-400     { background-color: var(--nile-colors-neutral-400); }
+.border-neutral-400 { border-color: var(--nile-colors-neutral-400); }
+
+/* neutral-500: #C7CED4 */
+.text-neutral-500   { color: var(--nile-colors-neutral-500); }
+.bg-neutral-500     { background-color: var(--nile-colors-neutral-500); }
+.border-neutral-500 { border-color: var(--nile-colors-neutral-500); }
+
+/* neutral-700: #777D82 */
+.text-neutral-700   { color: var(--nile-colors-neutral-700); }
+.bg-neutral-700     { background-color: var(--nile-colors-neutral-700); }
+.border-neutral-700 { border-color: var(--nile-colors-neutral-700); }
+
+/* white-200: rgba(255, 255, 255, 0.2) */
+.text-white-200   { color: var(--nile-colors-white-200); }
+.bg-white-200     { background-color: var(--nile-colors-white-200); }
+.border-white-200 { border-color: var(--nile-colors-white-200); }
+
+/* white-500: rgba(255, 255, 255, 0.5) */
+.text-white-500   { color: var(--nile-colors-white-500); }
+.bg-white-500     { background-color: var(--nile-colors-white-500); }
+.border-white-500 { border-color: var(--nile-colors-white-500); }
+
+/* white-base: #FFFFFF */
+.text-white-base   { color: var(--nile-colors-white-base); }
+.bg-white-base     { background-color: var(--nile-colors-white-base); }
+.border-white-base { border-color: var(--nile-colors-white-base); }
+
+/* ============================================================
+   Typography — type scale (font-size)
+   ============================================================ */
+
+/* scale-1: 10.24px */
+.text-scale-1 { font-size: var(--nile-type-scale-1); }
+
+/* scale-2: 12px */
+.text-scale-2 { font-size: var(--nile-type-scale-2); }
+
+/* scale-3: 14px */
+.text-scale-3 { font-size: var(--nile-type-scale-3); }
+
+/* scale-4: 16px */
+.text-scale-4 { font-size: var(--nile-type-scale-4); }
+
+/* scale-5: 18px */
+.text-scale-5 { font-size: var(--nile-type-scale-5); }
+
+/* scale-6: 20px */
+.text-scale-6 { font-size: var(--nile-type-scale-6); }
+
+/* scale-7: 31.25px */
+.text-scale-7 { font-size: var(--nile-type-scale-7); }
+
+/* scale-8: 39.06px */
+.text-scale-8 { font-size: var(--nile-type-scale-8); }
+
+/* scale-9: 48.83px */
+.text-scale-9 { font-size: var(--nile-type-scale-9); }
+
+/* ============================================================
+   Typography — font-size named aliases
+   ============================================================ */
+
+/* font-size-micro: 10.24px */
+.text-micro { font-size: var(--nile-font-size-micro); }
+
+/* font-size-small: 12px */
+.text-small { font-size: var(--nile-font-size-small); }
+
+/* font-size-base: 14px */
+.text-base { font-size: var(--nile-font-size-base); }
+
+/* font-size-large: 18px */
+.text-large { font-size: var(--nile-font-size-large); }
+
+/* font-size-xlarge: 20px */
+.text-xlarge { font-size: var(--nile-font-size-xlarge); }
+
+/* ============================================================
+   Typography — font-weight
+   ============================================================ */
+
+/* font-regular: 400 */
+.font-regular { font-weight: var(--nile-font-weight-regular); }
+
+/* font-medium: 500 */
+.font-medium { font-weight: var(--nile-font-weight-medium); }
+
+/* font-semi-bold: 600 */
+.font-semi-bold { font-weight: var(--nile-font-weight-semi-bold); }
+
+/* font-bold: 700 */
+.font-bold { font-weight: var(--nile-font-weight-bold); }
+
+
+/* ============================================================
+   Layout — static utilities (no design tokens)
+   ============================================================ */
+
+/* Display */
+.block         { display: block; }
+.inline-block  { display: inline-block; }
+.inline        { display: inline; }
+.flex          { display: flex; }
+.inline-flex   { display: inline-flex; }
+.grid          { display: grid; }
+.hidden        { display: none; }
+
+/* Flex direction */
+.flex-row             { flex-direction: row; }
+.flex-row-reverse     { flex-direction: row-reverse; }
+.flex-col             { flex-direction: column; }
+.flex-col-reverse     { flex-direction: column-reverse; }
+
+/* Flex wrap */
+.flex-wrap    { flex-wrap: wrap; }
+.flex-nowrap  { flex-wrap: nowrap; }
+
+/* Flex grow / shrink */
+.flex-1        { flex: 1 1 0%; }
+.flex-auto     { flex: 1 1 auto; }
+.flex-none     { flex: none; }
+.flex-grow     { flex-grow: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+
+/* Align items */
+.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; }
+
+/* Align self */
+.self-auto    { align-self: auto; }
+.self-start   { align-self: flex-start; }
+.self-end     { align-self: flex-end; }
+.self-center  { align-self: center; }
+.self-stretch { align-self: stretch; }
+
+/* Justify content */
+.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; }
+
+/* Grid */
+.grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-12  { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+.col-span-1    { grid-column: span 1 / span 1; }
+.col-span-2    { grid-column: span 2 / span 2; }
+.col-span-3    { grid-column: span 3 / span 3; }
+.col-span-4    { grid-column: span 4 / span 4; }
+.col-span-full { grid-column: 1 / -1; }
+
+/* Position */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed    { position: fixed; }
+.sticky   { position: sticky; }
+
+/* Overflow */
+.overflow-auto    { overflow: auto; }
+.overflow-hidden  { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll  { overflow: scroll; }
+
+/* Text alignment */
+.text-left    { text-align: left; }
+.text-center  { text-align: center; }
+.text-right   { text-align: right; }
+.text-justify { text-align: justify; }
+
+/* Width / height */
+.w-full  { width: 100%; }
+.w-auto  { width: auto; }
+.h-full  { height: 100%; }
+.h-auto  { height: auto; }
+.min-w-0 { min-width: 0; }
+
+/* Cursor */
+.cursor-pointer     { cursor: pointer; }
+.cursor-default     { cursor: default; }
+.cursor-not-allowed { cursor: not-allowed; }