@kenlo/kdls-design-system 2.0.0

package/foundations/tokens.css

@@ -0,0 +1,1338 @@
+/* Source for foundations/tokens.css — run `npm run gen:tokens` after editing.
+   No usage-rule comments here — token usage rules live in
+   .claude/tokens-reference.md. General component rules: .claude/component-rules.md. */
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap");
+/* -------------------------------SEMANTIC ALIASES------------------------------- */
+:root {
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-on-primary: var(--color-white);
+  --component-bg-color: var(--color-neutral-00);
+  --border-interactive-color: var(--color-neutral-30);
+  --border-static-color: var(--color-neutral-20);
+  --placeholder-color: var(--color-neutral-50);
+  --focus-stroke-color: var(--color-neutral-90-00);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------COLOR SCHEMES--------------------------------- */
+[data-color-scheme="neutral"] {
+  --color-primary-10: var(--color-neutral-10);
+  --color-primary-20: var(--color-neutral-20);
+  --color-primary-30: var(--color-neutral-30);
+  --color-primary-40: var(--color-neutral-50);
+  --color-primary-50: var(--color-neutral-80);
+  --color-primary-60: var(--color-neutral-90);
+  --color-primary-70: var(--color-neutral-90);
+  --color-primary-80: var(--color-neutral-90);
+  --color-primary-90: var(--color-neutral-90);
+}
+
+/* Map key = attribute value; tuple = (source family, force --color-on-primary: black?) */
+[data-color-scheme="secondary"] {
+  --color-primary-10: var(--color-secondary-10);
+  --color-primary-20: var(--color-secondary-20);
+  --color-primary-30: var(--color-secondary-30);
+  --color-primary-40: var(--color-secondary-40);
+  --color-primary-50: var(--color-secondary-50);
+  --color-primary-60: var(--color-secondary-60);
+  --color-primary-70: var(--color-secondary-70);
+  --color-primary-80: var(--color-secondary-80);
+  --color-primary-90: var(--color-secondary-90);
+}
+
+[data-color-scheme="tertiary"] {
+  --color-primary-10: var(--color-tertiary-10);
+  --color-primary-20: var(--color-tertiary-20);
+  --color-primary-30: var(--color-tertiary-30);
+  --color-primary-40: var(--color-tertiary-40);
+  --color-primary-50: var(--color-tertiary-50);
+  --color-primary-60: var(--color-tertiary-60);
+  --color-primary-70: var(--color-tertiary-70);
+  --color-primary-80: var(--color-tertiary-80);
+  --color-primary-90: var(--color-tertiary-90);
+}
+
+[data-color-scheme="lya"] {
+  --color-primary-10: var(--color-lya-10);
+  --color-primary-20: var(--color-lya-20);
+  --color-primary-30: var(--color-lya-30);
+  --color-primary-40: var(--color-lya-40);
+  --color-primary-50: var(--color-lya-50);
+  --color-primary-60: var(--color-lya-60);
+  --color-primary-70: var(--color-lya-70);
+  --color-primary-80: var(--color-lya-80);
+  --color-primary-90: var(--color-lya-90);
+}
+
+[data-color-scheme="leaf"] {
+  --color-primary-10: var(--color-leaf-10);
+  --color-primary-20: var(--color-leaf-20);
+  --color-primary-30: var(--color-leaf-30);
+  --color-primary-40: var(--color-leaf-40);
+  --color-primary-50: var(--color-leaf-50);
+  --color-primary-60: var(--color-leaf-60);
+  --color-primary-70: var(--color-leaf-70);
+  --color-primary-80: var(--color-leaf-80);
+  --color-primary-90: var(--color-leaf-90);
+  --color-on-primary: var(--color-black);
+}
+
+[data-color-scheme="sand"] {
+  --color-primary-10: var(--color-sand-10);
+  --color-primary-20: var(--color-sand-20);
+  --color-primary-30: var(--color-sand-30);
+  --color-primary-40: var(--color-sand-40);
+  --color-primary-50: var(--color-sand-50);
+  --color-primary-60: var(--color-sand-60);
+  --color-primary-70: var(--color-sand-70);
+  --color-primary-80: var(--color-sand-80);
+  --color-primary-90: var(--color-sand-90);
+  --color-on-primary: var(--color-black);
+}
+
+[data-color-scheme="wood"] {
+  --color-primary-10: var(--color-wood-10);
+  --color-primary-20: var(--color-wood-20);
+  --color-primary-30: var(--color-wood-30);
+  --color-primary-40: var(--color-wood-40);
+  --color-primary-50: var(--color-wood-50);
+  --color-primary-60: var(--color-wood-60);
+  --color-primary-70: var(--color-wood-70);
+  --color-primary-80: var(--color-wood-80);
+  --color-primary-90: var(--color-wood-90);
+}
+
+[data-color-scheme="clay"] {
+  --color-primary-10: var(--color-clay-10);
+  --color-primary-20: var(--color-clay-20);
+  --color-primary-30: var(--color-clay-30);
+  --color-primary-40: var(--color-clay-40);
+  --color-primary-50: var(--color-clay-50);
+  --color-primary-60: var(--color-clay-60);
+  --color-primary-70: var(--color-clay-70);
+  --color-primary-80: var(--color-clay-80);
+  --color-primary-90: var(--color-clay-90);
+}
+
+[data-color-scheme="flower"] {
+  --color-primary-10: var(--color-flower-10);
+  --color-primary-20: var(--color-flower-20);
+  --color-primary-30: var(--color-flower-30);
+  --color-primary-40: var(--color-flower-40);
+  --color-primary-50: var(--color-flower-50);
+  --color-primary-60: var(--color-flower-60);
+  --color-primary-70: var(--color-flower-70);
+  --color-primary-80: var(--color-flower-80);
+  --color-primary-90: var(--color-flower-90);
+}
+
+[data-color-scheme="dusk"] {
+  --color-primary-10: var(--color-dusk-10);
+  --color-primary-20: var(--color-dusk-20);
+  --color-primary-30: var(--color-dusk-30);
+  --color-primary-40: var(--color-dusk-40);
+  --color-primary-50: var(--color-dusk-50);
+  --color-primary-60: var(--color-dusk-60);
+  --color-primary-70: var(--color-dusk-70);
+  --color-primary-80: var(--color-dusk-80);
+  --color-primary-90: var(--color-dusk-90);
+}
+
+[data-color-scheme="sky"] {
+  --color-primary-10: var(--color-sky-10);
+  --color-primary-20: var(--color-sky-20);
+  --color-primary-30: var(--color-sky-30);
+  --color-primary-40: var(--color-sky-40);
+  --color-primary-50: var(--color-sky-50);
+  --color-primary-60: var(--color-sky-60);
+  --color-primary-70: var(--color-sky-70);
+  --color-primary-80: var(--color-sky-80);
+  --color-primary-90: var(--color-sky-90);
+}
+
+[data-color-scheme="sea"] {
+  --color-primary-10: var(--color-sea-10);
+  --color-primary-20: var(--color-sea-20);
+  --color-primary-30: var(--color-sea-30);
+  --color-primary-40: var(--color-sea-40);
+  --color-primary-50: var(--color-sea-50);
+  --color-primary-60: var(--color-sea-60);
+  --color-primary-70: var(--color-sea-70);
+  --color-primary-80: var(--color-sea-80);
+  --color-primary-90: var(--color-sea-90);
+}
+
+[data-color-scheme="lake"] {
+  --color-primary-10: var(--color-lake-10);
+  --color-primary-20: var(--color-lake-20);
+  --color-primary-30: var(--color-lake-30);
+  --color-primary-40: var(--color-lake-40);
+  --color-primary-50: var(--color-lake-50);
+  --color-primary-60: var(--color-lake-60);
+  --color-primary-70: var(--color-lake-70);
+  --color-primary-80: var(--color-lake-80);
+  --color-primary-90: var(--color-lake-90);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -----------------------------------NEUTRAL------------------------------------ */
+:root {
+  --color-neutral-00-90: #ffffff;
+  --color-neutral-10-80: #f2f2f2;
+  --color-neutral-20-70: #e6e6e6;
+  --color-neutral-30-60: #d8d8d8;
+  --color-neutral-40-50: #b8b8b8;
+  --color-neutral-50-40: #808080;
+  --color-neutral-60-30: #595959;
+  --color-neutral-70-20: #404040;
+  --color-neutral-80-10: #262626;
+  --color-neutral-90-00: #1a1a1a;
+}
+
+[data-theme="dark"] {
+  --color-neutral-00-90: #1a1a1a;
+  --color-neutral-10-80: #262626;
+  --color-neutral-20-70: #404040;
+  --color-neutral-30-60: #595959;
+  --color-neutral-40-50: #808080;
+  --color-neutral-50-40: #b8b8b8;
+  --color-neutral-60-30: #d8d8d8;
+  --color-neutral-70-20: #e6e6e6;
+  --color-neutral-80-10: #f2f2f2;
+  --color-neutral-90-00: #ffffff;
+}
+
+:root {
+  --color-neutral-00: var(
+    --color-neutral-00-90
+  );
+  --color-neutral-10: var(
+    --color-neutral-10-80
+  );
+  --color-neutral-20: var(
+    --color-neutral-20-70
+  );
+  --color-neutral-30: var(
+    --color-neutral-30-60
+  );
+  --color-neutral-40: var(
+    --color-neutral-40-50
+  );
+  --color-neutral-50: var(
+    --color-neutral-50-40
+  );
+  --color-neutral-60: var(
+    --color-neutral-60-30
+  );
+  --color-neutral-70: var(
+    --color-neutral-70-20
+  );
+  --color-neutral-80: var(
+    --color-neutral-80-10
+  );
+  --color-neutral-90: var(
+    --color-neutral-90-00
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -----------------------------------PRIMARY------------------------------------ */
+:root {
+  --color-primary-10-90: #d1e7fa;
+  --color-primary-20-80: #a3cff5;
+  --color-primary-30-70: #76b7ef;
+  --color-primary-40-60: #489fea;
+  --color-primary-50-50: #1a87e5;
+  --color-primary-60-40: #156cb7;
+  --color-primary-70-30: #105189;
+  --color-primary-80-20: #0a365c;
+  --color-primary-90-10: #051b2e;
+}
+
+[data-theme="dark"] {
+  --color-primary-10-90: #051b2e;
+  --color-primary-20-80: #0a365c;
+  --color-primary-30-70: #105189;
+  --color-primary-40-60: #156cb7;
+  --color-primary-50-50: #1a87e5;
+  --color-primary-60-40: #489fea;
+  --color-primary-70-30: #76b7ef;
+  --color-primary-80-20: #a3cff5;
+  --color-primary-90-10: #d1e7fa;
+}
+
+:root {
+  --color-primary-10: var(
+    --color-primary-10-90
+  );
+  --color-primary-20: var(
+    --color-primary-20-80
+  );
+  --color-primary-30: var(
+    --color-primary-30-70
+  );
+  --color-primary-40: var(
+    --color-primary-40-60
+  );
+  --color-primary-50: var(
+    --color-primary-50-50
+  );
+  --color-primary-60: var(
+    --color-primary-60-40
+  );
+  --color-primary-70: var(
+    --color-primary-70-30
+  );
+  --color-primary-80: var(
+    --color-primary-80-20
+  );
+  --color-primary-90: var(
+    --color-primary-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+:root {
+  --color-kenlo-blue-10: var(--color-primary-10-90);
+  --color-kenlo-blue-20: var(--color-primary-20-80);
+  --color-kenlo-blue-30: var(--color-primary-30-70);
+  --color-kenlo-blue-40: var(--color-primary-40-60);
+  --color-kenlo-blue-50: var(--color-primary-50-50);
+  --color-kenlo-blue-60: var(--color-primary-60-40);
+  --color-kenlo-blue-70: var(--color-primary-70-30);
+  --color-kenlo-blue-80: var(--color-primary-80-20);
+  --color-kenlo-blue-90: var(--color-primary-90-10);
+}
+
+/* ----------------------------------SECONDARY----------------------------------- */
+:root {
+  --color-secondary-10-90: #fccfde;
+  --color-secondary-20-80: #fa9ebd;
+  --color-secondary-30-70: #f76e9b;
+  --color-secondary-40-60: #f53d7a;
+  --color-secondary-50-50: #f20d59;
+  --color-secondary-60-40: #c20a47;
+  --color-secondary-70-30: #910835;
+  --color-secondary-80-20: #610524;
+  --color-secondary-90-10: #300312;
+}
+
+[data-theme="dark"] {
+  --color-secondary-10-90: #300312;
+  --color-secondary-20-80: #610524;
+  --color-secondary-30-70: #910835;
+  --color-secondary-40-60: #c20a47;
+  --color-secondary-50-50: #f20d59;
+  --color-secondary-60-40: #f53d7a;
+  --color-secondary-70-30: #f76e9b;
+  --color-secondary-80-20: #fa9ebd;
+  --color-secondary-90-10: #fccfde;
+}
+
+:root {
+  --color-secondary-10: var(
+    --color-secondary-10-90
+  );
+  --color-secondary-20: var(
+    --color-secondary-20-80
+  );
+  --color-secondary-30: var(
+    --color-secondary-30-70
+  );
+  --color-secondary-40: var(
+    --color-secondary-40-60
+  );
+  --color-secondary-50: var(
+    --color-secondary-50-50
+  );
+  --color-secondary-60: var(
+    --color-secondary-60-40
+  );
+  --color-secondary-70: var(
+    --color-secondary-70-30
+  );
+  --color-secondary-80: var(
+    --color-secondary-80-20
+  );
+  --color-secondary-90: var(
+    --color-secondary-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -----------------------------------TERTIARY----------------------------------- */
+:root {
+  --color-tertiary-10-90: #ebdbf0;
+  --color-tertiary-20-80: #d6b8e0;
+  --color-tertiary-30-70: #c294d1;
+  --color-tertiary-40-60: #ad71c1;
+  --color-tertiary-50-50: #994db2;
+  --color-tertiary-60-40: #7a3e8e;
+  --color-tertiary-70-30: #5c2e6b;
+  --color-tertiary-80-20: #3d1f47;
+  --color-tertiary-90-10: #1f0f24;
+}
+
+[data-theme="dark"] {
+  --color-tertiary-10-90: #1f0f24;
+  --color-tertiary-20-80: #3d1f47;
+  --color-tertiary-30-70: #5c2e6b;
+  --color-tertiary-40-60: #7a3e8e;
+  --color-tertiary-50-50: #994db2;
+  --color-tertiary-60-40: #ad71c1;
+  --color-tertiary-70-30: #c294d1;
+  --color-tertiary-80-20: #d6b8e0;
+  --color-tertiary-90-10: #ebdbf0;
+}
+
+:root {
+  --color-tertiary-10: var(
+    --color-tertiary-10-90
+  );
+  --color-tertiary-20: var(
+    --color-tertiary-20-80
+  );
+  --color-tertiary-30: var(
+    --color-tertiary-30-70
+  );
+  --color-tertiary-40: var(
+    --color-tertiary-40-60
+  );
+  --color-tertiary-50: var(
+    --color-tertiary-50-50
+  );
+  --color-tertiary-60: var(
+    --color-tertiary-60-40
+  );
+  --color-tertiary-70: var(
+    --color-tertiary-70-30
+  );
+  --color-tertiary-80: var(
+    --color-tertiary-80-20
+  );
+  --color-tertiary-90: var(
+    --color-tertiary-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -------------------------------------LYA-------------------------------------- */
+:root {
+  --color-lya-10: linear-gradient(
+    91deg,
+    var(--color-sea-10) 0%,
+    var(--color-dusk-10) 50%,
+    var(--color-tertiary-10) 100%
+  );
+  --color-lya-20: linear-gradient(
+    91deg,
+    var(--color-sea-20) 0%,
+    var(--color-dusk-20) 50%,
+    var(--color-tertiary-20) 100%
+  );
+  --color-lya-30: linear-gradient(
+    91deg,
+    var(--color-sea-30) 0%,
+    var(--color-dusk-30) 50%,
+    var(--color-tertiary-30) 100%
+  );
+  --color-lya-40: linear-gradient(
+    91deg,
+    var(--color-sea-40) 0%,
+    var(--color-dusk-40) 50%,
+    var(--color-tertiary-40) 100%
+  );
+  --color-lya-50: linear-gradient(
+    91deg,
+    var(--color-sea-50) 0%,
+    var(--color-dusk-50) 50%,
+    var(--color-tertiary-50) 100%
+  );
+  --color-lya-60: linear-gradient(
+    91deg,
+    var(--color-sea-60) 0%,
+    var(--color-dusk-60) 50%,
+    var(--color-tertiary-60) 100%
+  );
+  --color-lya-70: linear-gradient(
+    91deg,
+    var(--color-sea-70) 0%,
+    var(--color-dusk-70) 50%,
+    var(--color-tertiary-70) 100%
+  );
+  --color-lya-80: linear-gradient(
+    91deg,
+    var(--color-sea-80) 0%,
+    var(--color-dusk-80) 50%,
+    var(--color-tertiary-80) 100%
+  );
+  --color-lya-90: linear-gradient(
+    91deg,
+    var(--color-sea-90) 0%,
+    var(--color-dusk-90) 50%,
+    var(--color-tertiary-90) 100%
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* ------------------------------FEEDBACK - SUCCESS------------------------------ */
+:root {
+  --color-success-10-90: #d1fad8;
+  --color-success-20-80: #a3f5b1;
+  --color-success-30-70: #75f08a;
+  --color-success-40-60: #47eb63;
+  --color-success-50-50: #14b830;
+  --color-success-60-40: #0f8a24;
+  --color-success-70-30: #0a5c18;
+  --color-success-80-20: #084512;
+  --color-success-90-10: #052e0c;
+}
+
+[data-theme="dark"] {
+  --color-success-10-90: #052e0c;
+  --color-success-20-80: #084512;
+  --color-success-30-70: #0a5c18;
+  --color-success-40-60: #0f8a24;
+  --color-success-50-50: #14b830;
+  --color-success-60-40: #47eb63;
+  --color-success-70-30: #75f08a;
+  --color-success-80-20: #a3f5b1;
+  --color-success-90-10: #d1fad8;
+}
+
+:root {
+  --color-success-10: var(
+    --color-success-10-90
+  );
+  --color-success-20: var(
+    --color-success-20-80
+  );
+  --color-success-30: var(
+    --color-success-30-70
+  );
+  --color-success-40: var(
+    --color-success-40-60
+  );
+  --color-success-50: var(
+    --color-success-50-50
+  );
+  --color-success-60: var(
+    --color-success-60-40
+  );
+  --color-success-70: var(
+    --color-success-70-30
+  );
+  --color-success-80: var(
+    --color-success-80-20
+  );
+  --color-success-90: var(
+    --color-success-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -------------------------------FEEDBACK - ALERT------------------------------- */
+:root {
+  --color-alert-10-90: #faecd1;
+  --color-alert-20-80: #f5daa3;
+  --color-alert-30-70: #f0c775;
+  --color-alert-40-60: #ebb447;
+  --color-alert-50-50: #e5a119;
+  --color-alert-60-40: #b88114;
+  --color-alert-70-30: #8a610f;
+  --color-alert-80-20: #5c410a;
+  --color-alert-90-10: #2e2005;
+}
+
+[data-theme="dark"] {
+  --color-alert-10-90: #2e2005;
+  --color-alert-20-80: #5c410a;
+  --color-alert-30-70: #8a610f;
+  --color-alert-40-60: #b88114;
+  --color-alert-50-50: #e5a119;
+  --color-alert-60-40: #ebb447;
+  --color-alert-70-30: #f0c775;
+  --color-alert-80-20: #f5daa3;
+  --color-alert-90-10: #faecd1;
+}
+
+:root {
+  --color-alert-10: var(
+    --color-alert-10-90
+  );
+  --color-alert-20: var(
+    --color-alert-20-80
+  );
+  --color-alert-30: var(
+    --color-alert-30-70
+  );
+  --color-alert-40: var(
+    --color-alert-40-60
+  );
+  --color-alert-50: var(
+    --color-alert-50-50
+  );
+  --color-alert-60: var(
+    --color-alert-60-40
+  );
+  --color-alert-70: var(
+    --color-alert-70-30
+  );
+  --color-alert-80: var(
+    --color-alert-80-20
+  );
+  --color-alert-90: var(
+    --color-alert-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -------------------------------FEEDBACK - ERROR------------------------------- */
+:root {
+  --color-error-10-90: #fad5d1;
+  --color-error-20-80: #f5aaa3;
+  --color-error-30-70: #ef8076;
+  --color-error-40-60: #ea5548;
+  --color-error-50-50: #e52b1a;
+  --color-error-60-40: #b72215;
+  --color-error-70-30: #891a10;
+  --color-error-80-20: #5c110a;
+  --color-error-90-10: #2e0905;
+}
+
+[data-theme="dark"] {
+  --color-error-10-90: #2e0905;
+  --color-error-20-80: #5c110a;
+  --color-error-30-70: #891a10;
+  --color-error-40-60: #b72215;
+  --color-error-50-50: #e52b1a;
+  --color-error-60-40: #ea5548;
+  --color-error-70-30: #ef8076;
+  --color-error-80-20: #f5aaa3;
+  --color-error-90-10: #fad5d1;
+}
+
+:root {
+  --color-error-10: var(
+    --color-error-10-90
+  );
+  --color-error-20: var(
+    --color-error-20-80
+  );
+  --color-error-30: var(
+    --color-error-30-70
+  );
+  --color-error-40: var(
+    --color-error-40-60
+  );
+  --color-error-50: var(
+    --color-error-50-50
+  );
+  --color-error-60: var(
+    --color-error-60-40
+  );
+  --color-error-70: var(
+    --color-error-70-30
+  );
+  --color-error-80: var(
+    --color-error-80-20
+  );
+  --color-error-90: var(
+    --color-error-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - LEAF-------------------------------- */
+:root {
+  --color-leaf-10-90: #ecf2d9;
+  --color-leaf-20-80: #d9e5b3;
+  --color-leaf-30-70: #c5d98c;
+  --color-leaf-40-60: #b2cc66;
+  --color-leaf-50-50: #9fbf40;
+  --color-leaf-60-40: #7f9933;
+  --color-leaf-70-30: #5f7326;
+  --color-leaf-80-20: #404c1a;
+  --color-leaf-90-10: #20260d;
+}
+
+[data-theme="dark"] {
+  --color-leaf-10-90: #20260d;
+  --color-leaf-20-80: #404c1a;
+  --color-leaf-30-70: #5f7326;
+  --color-leaf-40-60: #7f9933;
+  --color-leaf-50-50: #9fbf40;
+  --color-leaf-60-40: #b2cc66;
+  --color-leaf-70-30: #c5d98c;
+  --color-leaf-80-20: #d9e5b3;
+  --color-leaf-90-10: #ecf2d9;
+}
+
+:root {
+  --color-leaf-10: var(
+    --color-leaf-10-90
+  );
+  --color-leaf-20: var(
+    --color-leaf-20-80
+  );
+  --color-leaf-30: var(
+    --color-leaf-30-70
+  );
+  --color-leaf-40: var(
+    --color-leaf-40-60
+  );
+  --color-leaf-50: var(
+    --color-leaf-50-50
+  );
+  --color-leaf-60: var(
+    --color-leaf-60-40
+  );
+  --color-leaf-70: var(
+    --color-leaf-70-30
+  );
+  --color-leaf-80: var(
+    --color-leaf-80-20
+  );
+  --color-leaf-90: var(
+    --color-leaf-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - SAND-------------------------------- */
+:root {
+  --color-sand-10-90: #f2eed9;
+  --color-sand-20-80: #e5ddb3;
+  --color-sand-30-70: #d9cc8c;
+  --color-sand-40-60: #ccbb66;
+  --color-sand-50-50: #bfaa40;
+  --color-sand-60-40: #998833;
+  --color-sand-70-30: #736626;
+  --color-sand-80-20: #4c441a;
+  --color-sand-90-10: #26220d;
+}
+
+[data-theme="dark"] {
+  --color-sand-10-90: #26220d;
+  --color-sand-20-80: #4c441a;
+  --color-sand-30-70: #736626;
+  --color-sand-40-60: #998833;
+  --color-sand-50-50: #bfaa40;
+  --color-sand-60-40: #ccbb66;
+  --color-sand-70-30: #d9cc8c;
+  --color-sand-80-20: #e5ddb3;
+  --color-sand-90-10: #f2eed9;
+}
+
+:root {
+  --color-sand-10: var(
+    --color-sand-10-90
+  );
+  --color-sand-20: var(
+    --color-sand-20-80
+  );
+  --color-sand-30: var(
+    --color-sand-30-70
+  );
+  --color-sand-40: var(
+    --color-sand-40-60
+  );
+  --color-sand-50: var(
+    --color-sand-50-50
+  );
+  --color-sand-60: var(
+    --color-sand-60-40
+  );
+  --color-sand-70: var(
+    --color-sand-70-30
+  );
+  --color-sand-80: var(
+    --color-sand-80-20
+  );
+  --color-sand-90: var(
+    --color-sand-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - WOOD-------------------------------- */
+:root {
+  --color-wood-10-90: #f2e1d9;
+  --color-wood-20-80: #e5c3b3;
+  --color-wood-30-70: #d9a68c;
+  --color-wood-40-60: #cc8866;
+  --color-wood-50-50: #bf6a40;
+  --color-wood-60-40: #995533;
+  --color-wood-70-30: #734026;
+  --color-wood-80-20: #4c2a1a;
+  --color-wood-90-10: #26170d;
+}
+
+[data-theme="dark"] {
+  --color-wood-10-90: #26170d;
+  --color-wood-20-80: #4c2a1a;
+  --color-wood-30-70: #734026;
+  --color-wood-40-60: #995533;
+  --color-wood-50-50: #bf6a40;
+  --color-wood-60-40: #cc8866;
+  --color-wood-70-30: #d9a68c;
+  --color-wood-80-20: #e5c3b3;
+  --color-wood-90-10: #f2e1d9;
+}
+
+:root {
+  --color-wood-10: var(
+    --color-wood-10-90
+  );
+  --color-wood-20: var(
+    --color-wood-20-80
+  );
+  --color-wood-30: var(
+    --color-wood-30-70
+  );
+  --color-wood-40: var(
+    --color-wood-40-60
+  );
+  --color-wood-50: var(
+    --color-wood-50-50
+  );
+  --color-wood-60: var(
+    --color-wood-60-40
+  );
+  --color-wood-70: var(
+    --color-wood-70-30
+  );
+  --color-wood-80: var(
+    --color-wood-80-20
+  );
+  --color-wood-90: var(
+    --color-wood-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - CLAY-------------------------------- */
+:root {
+  --color-clay-10-90: #f2d9df;
+  --color-clay-20-80: #e5b3bf;
+  --color-clay-30-70: #d98ca0;
+  --color-clay-40-60: #cc6680;
+  --color-clay-50-50: #bf4060;
+  --color-clay-60-40: #99334d;
+  --color-clay-70-30: #73263a;
+  --color-clay-80-20: #4c1a26;
+  --color-clay-90-10: #260d13;
+}
+
+[data-theme="dark"] {
+  --color-clay-10-90: #260d13;
+  --color-clay-20-80: #4c1a26;
+  --color-clay-30-70: #73263a;
+  --color-clay-40-60: #99334d;
+  --color-clay-50-50: #bf4060;
+  --color-clay-60-40: #cc6680;
+  --color-clay-70-30: #d98ca0;
+  --color-clay-80-20: #e5b3bf;
+  --color-clay-90-10: #f2d9df;
+}
+
+:root {
+  --color-clay-10: var(
+    --color-clay-10-90
+  );
+  --color-clay-20: var(
+    --color-clay-20-80
+  );
+  --color-clay-30: var(
+    --color-clay-30-70
+  );
+  --color-clay-40: var(
+    --color-clay-40-60
+  );
+  --color-clay-50: var(
+    --color-clay-50-50
+  );
+  --color-clay-60: var(
+    --color-clay-60-40
+  );
+  --color-clay-70: var(
+    --color-clay-70-30
+  );
+  --color-clay-80: var(
+    --color-clay-80-20
+  );
+  --color-clay-90: var(
+    --color-clay-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -------------------------------SUPPORT - FLOWER------------------------------- */
+:root {
+  --color-flower-10-90: #f2d9f2;
+  --color-flower-20-80: #e5b3e5;
+  --color-flower-30-70: #d98cd9;
+  --color-flower-40-60: #cc66cc;
+  --color-flower-50-50: #bf40bf;
+  --color-flower-60-40: #993399;
+  --color-flower-70-30: #732673;
+  --color-flower-80-20: #4c1a4c;
+  --color-flower-90-10: #260d26;
+}
+
+[data-theme="dark"] {
+  --color-flower-10-90: #260d26;
+  --color-flower-20-80: #4c1a4c;
+  --color-flower-30-70: #732673;
+  --color-flower-40-60: #993399;
+  --color-flower-50-50: #bf40bf;
+  --color-flower-60-40: #cc66cc;
+  --color-flower-70-30: #d98cd9;
+  --color-flower-80-20: #e5b3e5;
+  --color-flower-90-10: #f2d9f2;
+}
+
+:root {
+  --color-flower-10: var(
+    --color-flower-10-90
+  );
+  --color-flower-20: var(
+    --color-flower-20-80
+  );
+  --color-flower-30: var(
+    --color-flower-30-70
+  );
+  --color-flower-40: var(
+    --color-flower-40-60
+  );
+  --color-flower-50: var(
+    --color-flower-50-50
+  );
+  --color-flower-60: var(
+    --color-flower-60-40
+  );
+  --color-flower-70: var(
+    --color-flower-70-30
+  );
+  --color-flower-80: var(
+    --color-flower-80-20
+  );
+  --color-flower-90: var(
+    --color-flower-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - DUSK-------------------------------- */
+:root {
+  --color-dusk-10-90: #e1d9f2;
+  --color-dusk-20-80: #c3b3e5;
+  --color-dusk-30-70: #a68cd9;
+  --color-dusk-40-60: #8866cc;
+  --color-dusk-50-50: #6a40bf;
+  --color-dusk-60-40: #553399;
+  --color-dusk-70-30: #402673;
+  --color-dusk-80-20: #2a1a4c;
+  --color-dusk-90-10: #150d26;
+}
+
+[data-theme="dark"] {
+  --color-dusk-10-90: #150d26;
+  --color-dusk-20-80: #2a1a4c;
+  --color-dusk-30-70: #402673;
+  --color-dusk-40-60: #553399;
+  --color-dusk-50-50: #6a40bf;
+  --color-dusk-60-40: #8866cc;
+  --color-dusk-70-30: #a68cd9;
+  --color-dusk-80-20: #c3b3e5;
+  --color-dusk-90-10: #e1d9f2;
+}
+
+:root {
+  --color-dusk-10: var(
+    --color-dusk-10-90
+  );
+  --color-dusk-20: var(
+    --color-dusk-20-80
+  );
+  --color-dusk-30: var(
+    --color-dusk-30-70
+  );
+  --color-dusk-40: var(
+    --color-dusk-40-60
+  );
+  --color-dusk-50: var(
+    --color-dusk-50-50
+  );
+  --color-dusk-60: var(
+    --color-dusk-60-40
+  );
+  --color-dusk-70: var(
+    --color-dusk-70-30
+  );
+  --color-dusk-80: var(
+    --color-dusk-80-20
+  );
+  --color-dusk-90: var(
+    --color-dusk-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - SKY--------------------------------- */
+:root {
+  --color-sky-10-90: #d9e1f2;
+  --color-sky-20-80: #b3c3e5;
+  --color-sky-30-70: #8ca6d9;
+  --color-sky-40-60: #6688cc;
+  --color-sky-50-50: #406abf;
+  --color-sky-60-40: #335599;
+  --color-sky-70-30: #264073;
+  --color-sky-80-20: #1a2a4c;
+  --color-sky-90-10: #0d1526;
+}
+
+[data-theme="dark"] {
+  --color-sky-10-90: #0d1526;
+  --color-sky-20-80: #1a2a4c;
+  --color-sky-30-70: #264073;
+  --color-sky-40-60: #335599;
+  --color-sky-50-50: #406abf;
+  --color-sky-60-40: #6688cc;
+  --color-sky-70-30: #8ca6d9;
+  --color-sky-80-20: #b3c3e5;
+  --color-sky-90-10: #d9e1f2;
+}
+
+:root {
+  --color-sky-10: var(
+    --color-sky-10-90
+  );
+  --color-sky-20: var(
+    --color-sky-20-80
+  );
+  --color-sky-30: var(
+    --color-sky-30-70
+  );
+  --color-sky-40: var(
+    --color-sky-40-60
+  );
+  --color-sky-50: var(
+    --color-sky-50-50
+  );
+  --color-sky-60: var(
+    --color-sky-60-40
+  );
+  --color-sky-70: var(
+    --color-sky-70-30
+  );
+  --color-sky-80: var(
+    --color-sky-80-20
+  );
+  --color-sky-90: var(
+    --color-sky-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - SEA--------------------------------- */
+:root {
+  --color-sea-10-90: #d9eaf2;
+  --color-sea-20-80: #b3d5e5;
+  --color-sea-30-70: #8cbfd9;
+  --color-sea-40-60: #66aacc;
+  --color-sea-50-50: #4095bf;
+  --color-sea-60-40: #337799;
+  --color-sea-70-30: #265973;
+  --color-sea-80-20: #1a3c4c;
+  --color-sea-90-10: #0d1e26;
+}
+
+[data-theme="dark"] {
+  --color-sea-10-90: #0d1e26;
+  --color-sea-20-80: #1a3c4c;
+  --color-sea-30-70: #265973;
+  --color-sea-40-60: #337799;
+  --color-sea-50-50: #4095bf;
+  --color-sea-60-40: #66aacc;
+  --color-sea-70-30: #8cbfd9;
+  --color-sea-80-20: #b3d5e5;
+  --color-sea-90-10: #d9eaf2;
+}
+
+:root {
+  --color-sea-10: var(
+    --color-sea-10-90
+  );
+  --color-sea-20: var(
+    --color-sea-20-80
+  );
+  --color-sea-30: var(
+    --color-sea-30-70
+  );
+  --color-sea-40: var(
+    --color-sea-40-60
+  );
+  --color-sea-50: var(
+    --color-sea-50-50
+  );
+  --color-sea-60: var(
+    --color-sea-60-40
+  );
+  --color-sea-70: var(
+    --color-sea-70-30
+  );
+  --color-sea-80: var(
+    --color-sea-80-20
+  );
+  --color-sea-90: var(
+    --color-sea-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* --------------------------------SUPPORT - LAKE-------------------------------- */
+:root {
+  --color-lake-10-90: #d9f2ee;
+  --color-lake-20-80: #b3e5dd;
+  --color-lake-30-70: #8cd9cc;
+  --color-lake-40-60: #66ccbb;
+  --color-lake-50-50: #40bfaa;
+  --color-lake-60-40: #339988;
+  --color-lake-70-30: #267366;
+  --color-lake-80-20: #1a4c44;
+  --color-lake-90-10: #0d2622;
+}
+
+[data-theme="dark"] {
+  --color-lake-10-90: #0d2622;
+  --color-lake-20-80: #1a4c44;
+  --color-lake-30-70: #267366;
+  --color-lake-40-60: #339988;
+  --color-lake-50-50: #40bfaa;
+  --color-lake-60-40: #66ccbb;
+  --color-lake-70-30: #8cd9cc;
+  --color-lake-80-20: #b3e5dd;
+  --color-lake-90-10: #d9f2ee;
+}
+
+:root {
+  --color-lake-10: var(
+    --color-lake-10-90
+  );
+  --color-lake-20: var(
+    --color-lake-20-80
+  );
+  --color-lake-30: var(
+    --color-lake-30-70
+  );
+  --color-lake-40: var(
+    --color-lake-40-60
+  );
+  --color-lake-50: var(
+    --color-lake-50-50
+  );
+  --color-lake-60: var(
+    --color-lake-60-40
+  );
+  --color-lake-70: var(
+    --color-lake-70-30
+  );
+  --color-lake-80: var(
+    --color-lake-80-20
+  );
+  --color-lake-90: var(
+    --color-lake-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -----------------------------------OPACITY------------------------------------ */
+:root {
+  --color-opacity-05: rgba(26, 26, 26, 0.05);
+  --color-opacity-10: rgba(26, 26, 26, 0.1);
+  --color-opacity-20: rgba(26, 26, 26, 0.2);
+  --color-opacity-30: rgba(26, 26, 26, 0.3);
+  --color-opacity-40: rgba(26, 26, 26, 0.4);
+  --color-opacity-50: rgba(26, 26, 26, 0.5);
+}
+
+[data-theme="dark"] {
+  --color-opacity-05: rgba(255, 255, 255, 0.05);
+  --color-opacity-10: rgba(255, 255, 255, 0.1);
+  --color-opacity-20: rgba(255, 255, 255, 0.2);
+  --color-opacity-30: rgba(255, 255, 255, 0.3);
+  --color-opacity-40: rgba(255, 255, 255, 0.4);
+  --color-opacity-50: rgba(255, 255, 255, 0.5);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* ---------------------------CORNER RADIUS (DEFAULT)---------------------------- */
+:root {
+  --corner-radius-x-small: 8px;
+  --corner-radius-small: 8px;
+  --corner-radius-medium: 12px;
+  --corner-radius-large: 24px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -----------------------------------SPACING------------------------------------ */
+:root {
+  --spacing-0-5: 2px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+}
+
+/* ------------------------------------------------------------------------------ */
+/* ----------------------------------TYPOGRAPHY---------------------------------- */
+:root {
+  --font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-size-display-lg: 56px;
+  --font-size-display-md: 40px;
+  --font-size-display-sm: 32px;
+  --font-size-title-lg: 24px;
+  --font-size-title-md: 20px;
+  --font-size-title-sm: 16px;
+  --font-size-body-md: 16px;
+  --font-size-body-sm: 14px;
+  --font-size-label-sm: 12px;
+  --lh-display-lg: 64px;
+  --lh-display-md: 48px;
+  --lh-display-sm: 40px;
+  --lh-title-lg: 32px;
+  --lh-title-md: 24px;
+  --lh-title-sm: 24px;
+  --lh-body-md: 24px;
+  --lh-body-sm: 20px;
+  --lh-label-sm: 16px;
+  --display-color: var(--color-neutral-90);
+  --title-color: var(--color-neutral-90);
+  --body-color: var(--color-neutral-80);
+  --label-color: var(--color-neutral-50);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -------------------------------ICON SIZE------------------------------- */
+:root {
+  --icon-size-sm: 16px;
+  --icon-size-md: 24px;
+  --icon-size-lg: 32px;
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -----------------------------------SHADOWS------------------------------------ */
+:root {
+  --shadow-drop-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
+  --shadow-drop-md: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
+  --shadow-drop-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.16);
+}
+
+[data-theme="dark"] {
+  --shadow-drop-sm: 0 2px 10px 0 rgba(255, 255, 255, 0.07);
+  --shadow-drop-md: 0 4px 18px 0 rgba(255, 255, 255, 0.09);
+  --shadow-drop-lg: 0 8px 28px 0 rgba(255, 255, 255, 0.11);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* ------------------------------------EASING------------------------------------ */
+:root {
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -----------------------------PAGE BACKGROUND----------------------------- */
+:root {
+  --page-bg-color: #f2f2f2;
+}
+
+[data-theme="dark"] {
+  --page-bg-color: #000000;
+}
+
+/* ------------------------------------------------------------------------------ */
+/* -------------------------------RADIUS VARIANTS-------------------------------- */
+[data-radius="soft"] {
+  --corner-radius-x-small: 6px;
+  --corner-radius-small: 12px;
+  --corner-radius-medium: 16px;
+  --corner-radius-large: 28px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+[data-radius="flat"] {
+  --corner-radius-x-small: 0px;
+  --corner-radius-small: 0px;
+  --corner-radius-medium: 0px;
+  --corner-radius-large: 0px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+[data-radius="rounded"] {
+  --corner-radius-x-small: 8px;
+  --corner-radius-small: 16px;
+  --corner-radius-medium: 24px;
+  --corner-radius-large: 40px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+/* ------------------------------------------------------------------------------ */
+/* ----------------------------FONT FAMILY OVERRIDES----------------------------- */
+[data-font="inter"] {
+  --font-family-base: "Inter", sans-serif;
+}
+
+[data-font="helvetica"] {
+  --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+[data-font="source-sans"] {
+  --font-family-base: "Source Sans 3", "Source Sans Pro", sans-serif;
+}
+
+[data-font="nunito"] {
+  --font-family-base: "Nunito", sans-serif;
+}
+
+[data-font="montserrat"] {
+  --font-family-base: "Montserrat", sans-serif;
+}
+
+/* ------------------------------------------------------------------------------ */