diff --git a/includes/admin/index.php b/admin/index.php
similarity index 100%
rename from includes/admin/index.php
rename to admin/index.php
diff --git a/includes/admin/test.html b/admin/test.html
similarity index 99%
rename from includes/admin/test.html
rename to admin/test.html
index 7db0e9d..50d1822 100644
--- a/includes/admin/test.html
+++ b/admin/test.html
@@ -23,9 +23,9 @@
   }
 </style>
 
-<h1>HTML5 Test Page</h1>
+<h1>Tangible Design</h1>
 
-<p>This is a test page with common HTML elements to provide visual feedback while building CSS systems and frameworks.</p>
+<p>This is a test page with common HTML elements to provide visual feedback while building design systems.</p>
 
 <nav class="pagenav">
   <ul>
diff --git a/build/design.min.css b/build/design.min.css
index af70893..7b6a2a4 100644
--- a/build/design.min.css
+++ b/build/design.min.css
@@ -1,614 +1,2 @@
-.tgbl-interface .tgbl-reset {
-  /*
-  Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-  */
-  /*
-  1. Use a consistent sensible line-height in all browsers.
-  2. Prevent adjustments of font size after orientation changes in iOS.
-  3. Use a more readable tab size.
-  4. Use the user's configured `sans` font-family by default.
-  5. Use the user's configured `sans` font-feature-settings by default.
-  6. Use the user's configured `sans` font-variation-settings by default.
-  */
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  -o-tab-size: 4;
-     tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
-  font-feature-settings: normal; /* 5 */
-  font-variation-settings: normal; /* 6 */
-  /*
-  1. Remove the margin in all browsers.
-  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-  */
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-  /*
-  1. Add the correct height in Firefox.
-  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-  3. Ensure horizontal rules are visible by default.
-  */
-  /*
-  Add the correct text decoration in Chrome, Edge, and Safari.
-  */
-  /*
-  Remove the default font size and weight for headings.
-  */
-  /*
-  Reset links to optimize for opt-in styling instead of opt-out.
-  */
-  /*
-  Add the correct font weight in Edge and Safari.
-  */
-  /*
-  1. Use the user's configured `mono` font family by default.
-  2. Correct the odd `em` font sizing in all browsers.
-  */
-  /*
-  Add the correct font size in all browsers.
-  */
-  /*
-  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-  */
-  /*
-  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-  3. Remove gaps between table borders by default.
-  */
-  /*
-  1. Change the font styles in all browsers.
-  2. Remove the margin in Firefox and Safari.
-  3. Remove default padding in all browsers.
-  */
-  /*
-  Remove the inheritance of text transform in Edge and Firefox.
-  */
-  /*
-  1. Correct the inability to style clickable types in iOS and Safari.
-  2. Remove default button styles.
-  3. Set the cursor to pointer for buttons.
-  */
-  /*
-  Use the modern Firefox focus style for all focusable elements.
-  */
-  /*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-  */
-  /*
-  Add the correct vertical alignment in Chrome and Firefox.
-  */
-  /*
-  Correct the cursor style of increment and decrement buttons in Safari.
-  */
-  /*
-  1. Correct the odd appearance in Chrome and Safari.
-  2. Correct the outline style in Safari.
-  */
-  /*
-  Remove the inner padding in Chrome and Safari on macOS.
-  */
-  /*
-  1. Correct the inability to style clickable types in iOS and Safari.
-  2. Change font properties to `inherit` in Safari.
-  */
-  /*
-  Add the correct display in Chrome and Safari.
-  */
-  /*
-  Removes the default spacing for appropriate elements.
-  */
-  /*
-  Prevent resizing textareas horizontally by default.
-  */
-  /*
-  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-  */
-  /*
-  Make sure disabled buttons don't get the pointer cursor.
-  */
-  /*
-  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-     This can trigger a poorly considered lint error in some tools but is included by design.
-  */
-  /*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-  */
-  /* Make elements with the HTML hidden attribute stay hidden by default */
-}
-.tgbl-interface .tgbl-reset *,
-.tgbl-interface .tgbl-reset ::before,
-.tgbl-interface .tgbl-reset ::after {
-  box-sizing: border-box;
-}
-.tgbl-interface .tgbl-reset hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-.tgbl-interface .tgbl-reset abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-.tgbl-interface .tgbl-reset h1,
-.tgbl-interface .tgbl-reset h2,
-.tgbl-interface .tgbl-reset h3,
-.tgbl-interface .tgbl-reset h4,
-.tgbl-interface .tgbl-reset h5,
-.tgbl-interface .tgbl-reset h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-.tgbl-interface .tgbl-reset a {
-  color: inherit;
-  text-decoration: inherit;
-}
-.tgbl-interface .tgbl-reset b,
-.tgbl-interface .tgbl-reset strong {
-  font-weight: bolder;
-}
-.tgbl-interface .tgbl-reset code,
-.tgbl-interface .tgbl-reset kbd,
-.tgbl-interface .tgbl-reset samp,
-.tgbl-interface .tgbl-reset pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-size: inherit; /* 2 */
-}
-.tgbl-interface .tgbl-reset small {
-  font-size: 80%;
-}
-.tgbl-interface .tgbl-reset sub,
-.tgbl-interface .tgbl-reset sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-.tgbl-interface .tgbl-reset sub {
-  bottom: -0.25em;
-}
-.tgbl-interface .tgbl-reset sup {
-  top: -0.5em;
-}
-.tgbl-interface .tgbl-reset table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-.tgbl-interface .tgbl-reset button,
-.tgbl-interface .tgbl-reset input,
-.tgbl-interface .tgbl-reset optgroup,
-.tgbl-interface .tgbl-reset select,
-.tgbl-interface .tgbl-reset textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
-}
-.tgbl-interface .tgbl-reset button,
-.tgbl-interface .tgbl-reset select {
-  text-transform: none;
-}
-.tgbl-interface .tgbl-reset button,
-.tgbl-interface .tgbl-reset [type=button],
-.tgbl-interface .tgbl-reset [type=reset],
-.tgbl-interface .tgbl-reset [type=submit] {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
-  cursor: pointer; /* 3 */
-}
-.tgbl-interface .tgbl-reset :-moz-focusring {
-  outline: auto;
-}
-.tgbl-interface .tgbl-reset :-moz-ui-invalid {
-  box-shadow: none;
-}
-.tgbl-interface .tgbl-reset progress {
-  vertical-align: baseline;
-}
-.tgbl-interface .tgbl-reset ::-webkit-inner-spin-button,
-.tgbl-interface .tgbl-reset ::-webkit-outer-spin-button {
-  height: auto;
-}
-.tgbl-interface .tgbl-reset [type=search] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-.tgbl-interface .tgbl-reset ::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-.tgbl-interface .tgbl-reset ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-.tgbl-interface .tgbl-reset summary {
-  display: list-item;
-}
-.tgbl-interface .tgbl-reset blockquote,
-.tgbl-interface .tgbl-reset dl,
-.tgbl-interface .tgbl-reset dd,
-.tgbl-interface .tgbl-reset h1,
-.tgbl-interface .tgbl-reset h2,
-.tgbl-interface .tgbl-reset h3,
-.tgbl-interface .tgbl-reset h4,
-.tgbl-interface .tgbl-reset h5,
-.tgbl-interface .tgbl-reset h6,
-.tgbl-interface .tgbl-reset hr,
-.tgbl-interface .tgbl-reset figure,
-.tgbl-interface .tgbl-reset p,
-.tgbl-interface .tgbl-reset pre {
-  margin: 0;
-}
-.tgbl-interface .tgbl-reset fieldset {
-  margin: 0;
-  padding: 0;
-}
-.tgbl-interface .tgbl-reset legend {
-  padding: 0;
-}
-.tgbl-interface .tgbl-reset ol,
-.tgbl-interface .tgbl-reset ul,
-.tgbl-interface .tgbl-reset menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.tgbl-interface .tgbl-reset dialog {
-  padding: 0;
-}
-.tgbl-interface .tgbl-reset textarea {
-  resize: vertical;
-}
-.tgbl-interface .tgbl-reset input::-moz-placeholder, .tgbl-interface .tgbl-reset textarea::-moz-placeholder {
-  opacity: 1;
-}
-.tgbl-interface .tgbl-reset input::placeholder,
-.tgbl-interface .tgbl-reset textarea::placeholder {
-  opacity: 1;
-}
-.tgbl-interface .tgbl-reset :disabled {
-  cursor: default;
-}
-.tgbl-interface .tgbl-reset img,
-.tgbl-interface .tgbl-reset svg,
-.tgbl-interface .tgbl-reset video,
-.tgbl-interface .tgbl-reset canvas,
-.tgbl-interface .tgbl-reset audio,
-.tgbl-interface .tgbl-reset iframe,
-.tgbl-interface .tgbl-reset embed,
-.tgbl-interface .tgbl-reset object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-.tgbl-interface .tgbl-reset img,
-.tgbl-interface .tgbl-reset video {
-  max-width: 100%;
-  height: auto;
-}
-.tgbl-interface .tgbl-reset [hidden] {
-  display: none;
-}
-.tgbl-interface label {
-  display: block;
-  font-size: 11px;
-  font-weight: 500;
-  color: #2f2f2f;
-  text-transform: uppercase;
-}
-.tgbl-interface label:has(input[type=checkbox]), .tgbl-interface label:has(input[type=radio]), .tgbl-interface input[type=checkbox] + label, .tgbl-interface input[type=radio] + label {
-  text-transform: unset;
-  font-size: inherit;
-}
-.tgbl-interface input[type=text],
-.tgbl-interface input[type=number],
-.tgbl-interface input[type=url],
-.tgbl-interface input[type=search],
-.tgbl-interface input[type=date],
-.tgbl-interface input[type=month],
-.tgbl-interface input[type=week],
-.tgbl-interface input[type=time],
-.tgbl-interface input[type=datetime],
-.tgbl-interface input[type=datetime-local],
-.tgbl-interface input[type=email],
-.tgbl-interface input[type=tel],
-.tgbl-interface input[type=password] {
-  height: calc(3em - 10px);
-}
-.tgbl-interface input[type=text],
-.tgbl-interface input[type=number],
-.tgbl-interface input[type=url],
-.tgbl-interface input[type=search],
-.tgbl-interface input[type=date],
-.tgbl-interface input[type=month],
-.tgbl-interface input[type=week],
-.tgbl-interface input[type=time],
-.tgbl-interface input[type=datetime],
-.tgbl-interface input[type=datetime-local],
-.tgbl-interface input[type=email],
-.tgbl-interface input[type=tel],
-.tgbl-interface input[type=password],
-.tgbl-interface select,
-.tgbl-interface textarea {
-  box-sizing: content-box;
-  font-size: 14px;
-  line-height: calc(3em - 10px);
-  font-family: inherit;
-  padding-inline: 10px;
-  padding-block: 4px;
-  margin-block: 0.5em 1em;
-  --tgbl-input--border: #d6d6d6;
-  --tgbl-input--background: #ffffff;
-  --tgbl-input--text: #2f2f2f;
-  --tgbl-input--placeholder: #bbbbbb;
-  border: 1px solid 1px;
-  border-radius: 3px;
-  background-color: var(--tgbl-input--background);
-  min-width: 1px;
-  width: calc(100% - 22px);
-  max-width: calc(100% - 22px);
-  min-height: calc(3em - 10px);
-  transition-property: color, border-color, background-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-}
-.tgbl-interface input[type=text]::-moz-placeholder, .tgbl-interface input[type=number]::-moz-placeholder, .tgbl-interface input[type=url]::-moz-placeholder, .tgbl-interface input[type=search]::-moz-placeholder, .tgbl-interface input[type=date]::-moz-placeholder, .tgbl-interface input[type=month]::-moz-placeholder, .tgbl-interface input[type=week]::-moz-placeholder, .tgbl-interface input[type=time]::-moz-placeholder, .tgbl-interface input[type=datetime]::-moz-placeholder, .tgbl-interface input[type=datetime-local]::-moz-placeholder, .tgbl-interface input[type=email]::-moz-placeholder, .tgbl-interface input[type=tel]::-moz-placeholder, .tgbl-interface input[type=password]::-moz-placeholder, .tgbl-interface select::-moz-placeholder, .tgbl-interface textarea::-moz-placeholder {
-  color: var(--tgbl-input--placeholder);
-}
-.tgbl-interface input[type=text]::placeholder,
-.tgbl-interface input[type=number]::placeholder,
-.tgbl-interface input[type=url]::placeholder,
-.tgbl-interface input[type=search]::placeholder,
-.tgbl-interface input[type=date]::placeholder,
-.tgbl-interface input[type=month]::placeholder,
-.tgbl-interface input[type=week]::placeholder,
-.tgbl-interface input[type=time]::placeholder,
-.tgbl-interface input[type=datetime]::placeholder,
-.tgbl-interface input[type=datetime-local]::placeholder,
-.tgbl-interface input[type=email]::placeholder,
-.tgbl-interface input[type=tel]::placeholder,
-.tgbl-interface input[type=password]::placeholder,
-.tgbl-interface select::placeholder,
-.tgbl-interface textarea::placeholder {
-  color: var(--tgbl-input--placeholder);
-}
-.tgbl-interface input[type=text]:focus, .tgbl-interface input[type=text]:focus-within,
-.tgbl-interface input[type=number]:focus,
-.tgbl-interface input[type=number]:focus-within,
-.tgbl-interface input[type=url]:focus,
-.tgbl-interface input[type=url]:focus-within,
-.tgbl-interface input[type=search]:focus,
-.tgbl-interface input[type=search]:focus-within,
-.tgbl-interface input[type=date]:focus,
-.tgbl-interface input[type=date]:focus-within,
-.tgbl-interface input[type=month]:focus,
-.tgbl-interface input[type=month]:focus-within,
-.tgbl-interface input[type=week]:focus,
-.tgbl-interface input[type=week]:focus-within,
-.tgbl-interface input[type=time]:focus,
-.tgbl-interface input[type=time]:focus-within,
-.tgbl-interface input[type=datetime]:focus,
-.tgbl-interface input[type=datetime]:focus-within,
-.tgbl-interface input[type=datetime-local]:focus,
-.tgbl-interface input[type=datetime-local]:focus-within,
-.tgbl-interface input[type=email]:focus,
-.tgbl-interface input[type=email]:focus-within,
-.tgbl-interface input[type=tel]:focus,
-.tgbl-interface input[type=tel]:focus-within,
-.tgbl-interface input[type=password]:focus,
-.tgbl-interface input[type=password]:focus-within,
-.tgbl-interface select:focus,
-.tgbl-interface select:focus-within,
-.tgbl-interface textarea:focus,
-.tgbl-interface textarea:focus-within {
-  --tgbl-input--border: #2563eb;
-  --tgbl-input--background: #ffffff;
-  --tgbl-input--text: #2f2f2f;
-  --tgbl-input--placeholder: #bbbbbb;
-  box-shadow: 1px 0 #2563eb;
-  outline: 2px solid rgba(0, 0, 0, 0);
-  outline-offset: 2px;
-}
-.tgbl-interface input[type=text][disabled],
-.tgbl-interface input[type=number][disabled],
-.tgbl-interface input[type=url][disabled],
-.tgbl-interface input[type=search][disabled],
-.tgbl-interface input[type=date][disabled],
-.tgbl-interface input[type=month][disabled],
-.tgbl-interface input[type=week][disabled],
-.tgbl-interface input[type=time][disabled],
-.tgbl-interface input[type=datetime][disabled],
-.tgbl-interface input[type=datetime-local][disabled],
-.tgbl-interface input[type=email][disabled],
-.tgbl-interface input[type=tel][disabled],
-.tgbl-interface input[type=password][disabled],
-.tgbl-interface select[disabled],
-.tgbl-interface textarea[disabled] {
-  --tgbl-input--border: #d6d6d6;
-  --tgbl-input--background: #f5f5f5;
-  --tgbl-input--text: #cccccc;
-  --tgbl-input--placeholder: #d6d6d6;
-}
-.tgbl-interface input[type=text]:invalid,
-.tgbl-interface input[type=number]:invalid,
-.tgbl-interface input[type=url]:invalid,
-.tgbl-interface input[type=search]:invalid,
-.tgbl-interface input[type=date]:invalid,
-.tgbl-interface input[type=month]:invalid,
-.tgbl-interface input[type=week]:invalid,
-.tgbl-interface input[type=time]:invalid,
-.tgbl-interface input[type=datetime]:invalid,
-.tgbl-interface input[type=datetime-local]:invalid,
-.tgbl-interface input[type=email]:invalid,
-.tgbl-interface input[type=tel]:invalid,
-.tgbl-interface input[type=password]:invalid,
-.tgbl-interface select:invalid,
-.tgbl-interface textarea:invalid {
-  --tgbl-input--border: #f87171;
-  --tgbl-input--background: #ffffff;
-  --tgbl-input--text: #2f2f2f;
-  --tgbl-input--placeholder: #bbbbbb;
-}
-.tgbl-interface select:not([multiple]) {
-  -webkit-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E1E1E' d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z' %3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 10px top 50%;
-  background-size: auto;
-  background-size: 24px auto;
-  padding-right: calc(1em + 10px);
-  width: calc(100% - 22px - 1em);
-  max-width: calc(100% - 22px - 1em);
-}
-.tgbl-interface select:focus-visible, .tgbl-interface input[type=radio]:focus, .tgbl-interface input[type=checkbox]:focus {
-  outline: 1px solid transparent;
-  --tgbl-input--border: #60a5fa;
-  --tgbl-input--background: #ffffff;
-  --tgbl-input--text: #2f2f2f;
-  --tgbl-input--placeholder: #bbbbbb;
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
-  outline: 2px solid rgba(0, 0, 0, 0);
-  outline-offset: 2px;
-}
-.tgbl-interface input[type=checkbox],
-.tgbl-interface input[type=radio] {
-  --tgbl-input--border: #d6d6d6;
-  --tgbl-input--background: #ffffff;
-  --tgbl-input--text: #2f2f2f;
-  --tgbl-input--placeholder: #bbbbbb;
-  border: 1px solid 1px;
-  margin: -1px 0.25em 0 -1px;
-  background-color: var(--tgbl-input--background);
-  color: var(--tgbl-input-text);
-  display: inline-flex;
-  line-height: 1;
-  text-align: center;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-  -webkit-appearance: none;
-  transition: color, border-color, background-color 0.2s ease-in-out;
-}
-.tgbl-interface input[type=checkbox]:checked,
-.tgbl-interface input[type=radio]:checked {
-  background-color: #2563eb;
-  border-color: #2563eb;
-  color: #ffffff;
-}
-.tgbl-interface input[type=checkbox]:checked::before,
-.tgbl-interface input[type=radio]:checked::before {
-  margin: auto;
-}
-.tgbl-interface input[type=checkbox] {
-  border-radius: 3px;
-}
-.tgbl-interface input[type=checkbox]:checked::before {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='m16.7 7.1-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' /%3E%3C/svg%3E");
-  speak: never;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  height: unset;
-  float: unset;
-  margin: -3px;
-  width: calc(100% + 6px);
-}
-.tgbl-interface input[type=radio] {
-  border-radius: 100%;
-}
-.tgbl-interface input[type=radio]:checked::before {
-  content: "";
-  background-color: currentcolor;
-  border-radius: inherit;
-  width: 0.5rem;
-  height: 0.5rem;
-}
-.tgbl-interface input[type=submit],
-.tgbl-interface input[type=button],
-.tgbl-interface input[type=reset],
-.tgbl-interface button[type=submit],
-.tgbl-interface button[type=button],
-.tgbl-interface button[type=reset] {
-  --tgbl-color--button-background: $button-theme-background;
-  --tgbl-color--button-background-hovered: $button-theme-background-hover;
-  --tgbl-color--button-background-focused: $button-theme-background-focus;
-  --tgbl-color--button-background-disabled: $button-theme-background-disabled;
-  --tgbl-color--button-text: $button-theme-value;
-  --tgbl-color--button-text-hovered: $button-theme-value-hover;
-  --tgbl-color--button-text-focused: $button-theme-value-focus;
-  --tgbl-color--button-text-disabled: $button-theme-value-disabled;
-  --tgbl-color--button-border: $button-theme-border;
-  --tgbl-color--button-border-hovered: $button-theme-border-hover;
-  --tgbl-color--button-border-focused: $button-theme-border-focus;
-  --tgbl-color--button-border-outer-focused: $button-theme-outline-focus;
-  --tgbl-color--button-border-disabled: $button-theme-border-disabled;
-  cursor: pointer;
-  background-color: var(--tgbl-color--button-background);
-  color: var(--tgbl-color--button-text);
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--tgbl-color--button-border);
-  border-radius: 3px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 1.4;
-  font-weight: bold;
-  display: inline-flex;
-  gap: 0.25em;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 10px;
-  padding-block: 4px;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  width: auto;
-  transition-property: color, border-color, background-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-}
-.tgbl-interface input[type=submit]:hover,
-.tgbl-interface input[type=button]:hover,
-.tgbl-interface input[type=reset]:hover,
-.tgbl-interface button[type=submit]:hover,
-.tgbl-interface button[type=button]:hover,
-.tgbl-interface button[type=reset]:hover {
-  background-color: var(--tgbl-color--button-background-hovered);
-  color: var(--tgbl-color--button-text-hovered);
-  border-color: var(--tgbl-color--button-border-hovered);
-}
-.tgbl-interface input[type=submit]:focus,
-.tgbl-interface input[type=button]:focus,
-.tgbl-interface input[type=reset]:focus,
-.tgbl-interface button[type=submit]:focus,
-.tgbl-interface button[type=button]:focus,
-.tgbl-interface button[type=reset]:focus {
-  background-color: var(--tgbl-color--button-background-focused);
-  color: var(--tgbl-color--button-text-focused);
-  border-color: var(--tgbl-color--button-border-focused);
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tgbl-color--button-border-outer-focused);
-  outline: 2px solid rgba(0, 0, 0, 0);
-  outline-offset: 2px;
-}
-.tgbl-interface input[type=submit][disabled], .tgbl-interface input[type=submit].disabled,
-.tgbl-interface input[type=button][disabled],
-.tgbl-interface input[type=button].disabled,
-.tgbl-interface input[type=reset][disabled],
-.tgbl-interface input[type=reset].disabled,
-.tgbl-interface button[type=submit][disabled],
-.tgbl-interface button[type=submit].disabled,
-.tgbl-interface button[type=button][disabled],
-.tgbl-interface button[type=button].disabled,
-.tgbl-interface button[type=reset][disabled],
-.tgbl-interface button[type=reset].disabled {
-  background-color: var(--tgbl-color--button-background-disabled);
-  color: var(--tgbl-color--button-text-disabled);
-  border-color: var(--tgbl-color--button-border-disabled);
-  cursor: not-allowed;
-}
+@charset "UTF-8";:root{--tgbl-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--tgbl-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--tgbl-font-family-emoji);--tgbl-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--tgbl-font-family-emoji);--tgbl-font-family:var(--tgbl-font-family-sans-serif);--tgbl-line-height:1.5;--tgbl-font-weight:400;--tgbl-font-size:100%;--tgbl-text-underline-offset:0.1rem;--tgbl-border-radius:0.25rem;--tgbl-border-width:0.0625rem;--tgbl-outline-width:0.125rem;--tgbl-transition:0.2s ease-in-out;--tgbl-spacing:1rem;--tgbl-typography-spacing-vertical:1rem;--tgbl-block-spacing-vertical:var(--tgbl-spacing);--tgbl-block-spacing-horizontal:var(--tgbl-spacing);--tgbl-grid-column-gap:var(--tgbl-spacing);--tgbl-grid-row-gap:var(--tgbl-spacing);--tgbl-form-element-spacing-vertical:0.75rem;--tgbl-form-element-spacing-horizontal:1rem;--tgbl-group-box-shadow:0 0 0 transparent;--tgbl-group-box-shadow-focus-with-button:0 0 0 var(--tgbl-outline-width) var(--tgbl-primary-focus);--tgbl-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--tgbl-form-element-border-color);--tgbl-modal-overlay-backdrop-filter:blur(0.375rem);--tgbl-nav-element-spacing-vertical:1rem;--tgbl-nav-element-spacing-horizontal:0.5rem;--tgbl-nav-link-spacing-vertical:0.5rem;--tgbl-nav-link-spacing-horizontal:0.5rem;--tgbl-nav-breadcrumb-divider:">";--tgbl-icon-checkbox:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--tgbl-icon-minus:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--tgbl-icon-chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238891A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--tgbl-icon-date:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238891A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4m-5 4h18'/%3E%3C/svg%3E");--tgbl-icon-time:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238891A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");--tgbl-icon-search:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238891A4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");--tgbl-icon-close:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238891A4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");--tgbl-icon-loading:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='none' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes rotate{0%25{transform:rotate(0deg)}}@keyframes dash{0%25{stroke-dasharray:1,100;stroke-dashoffset:0}50%25{stroke-dasharray:44.5,100;stroke-dashoffset:-17.5}}%3C/style%3E%3Cg style='animation:rotate 2s linear infinite;transform-origin:center center'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%238891A4' stroke-width='4' style='stroke-dasharray:75,100;stroke-dashoffset:-5;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round'/%3E%3C/g%3E%3C/svg%3E")}@media (min-width:576px){:root{--tgbl-font-size:106.25%}}@media (min-width:768px){:root{--tgbl-font-size:112.5%}}@media (min-width:1024px){:root{--tgbl-font-size:118.75%}}@media (min-width:1280px){:root{--tgbl-font-size:125%}}@media (min-width:1536px){:root{--tgbl-font-size:131.25%}}a,a.contrast,a.secondary{--tgbl-text-decoration:underline}small{--tgbl-font-size:0.875em}h1,h2,h3,h4,h5,h6{--tgbl-font-weight:700}h1{--tgbl-font-size:2rem;--tgbl-line-height:1.125;--tgbl-typography-spacing-top:3rem}h2{--tgbl-font-size:1.75rem;--tgbl-line-height:1.15;--tgbl-typography-spacing-top:2.625rem}h3{--tgbl-font-size:1.5rem;--tgbl-line-height:1.175;--tgbl-typography-spacing-top:2.25rem}h4{--tgbl-font-size:1.25rem;--tgbl-line-height:1.2;--tgbl-typography-spacing-top:1.874rem}h5{--tgbl-font-size:1.125rem;--tgbl-line-height:1.225;--tgbl-typography-spacing-top:1.6875rem}h6{--tgbl-font-size:1rem;--tgbl-line-height:1.25;--tgbl-typography-spacing-top:1.5rem}tfoot td,tfoot th,thead td,thead th{--tgbl-font-weight:600;--tgbl-border-width:0.1875rem}code,kbd,pre,samp{--tgbl-font-family:var(--tgbl-font-family-monospace)}kbd{--tgbl-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--tgbl-outline-width:0.0625rem}[type=search]{--tgbl-border-radius:5rem}[type=checkbox],[type=radio]{--tgbl-border-width:0.125rem}[type=checkbox][role=switch]{--tgbl-border-width:0.1875rem}details.dropdown summary:not([role=button]){--tgbl-outline-width:0.0625rem}nav details.dropdown summary:focus-visible{--tgbl-outline-width:0.125rem}[role=search]{--tgbl-border-radius:5rem}[role=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus){--tgbl-group-box-shadow-focus-with-button:0 0 0 var(--tgbl-outline-width) var(--tgbl-secondary-focus)}[role=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus){--tgbl-group-box-shadow-focus-with-button:0 0 0 var(--tgbl-outline-width) var(--tgbl-contrast-focus)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] button{--tgbl-form-element-spacing-horizontal:2rem}.tgbl-interface details summary[role=button]:not(.outline):after{filter:brightness(0) invert(1)}.tgbl-interface [aria-busy=true]:not(input,select,textarea):is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline):before{filter:brightness(0) invert(1)}:root:not([data-theme=dark]),[data-theme=light]{--tgbl-background-color:#fff;--tgbl-color:#373c44;--tgbl-text-selection-color:rgba(116,139,248,.25);--tgbl-muted-color:#646b79;--tgbl-muted-border-color:#e7eaf0;--tgbl-primary:#2060df;--tgbl-primary-background:#2060df;--tgbl-primary-border:var(--tgbl-primary-background);--tgbl-primary-underline:rgba(32,96,223,.5);--tgbl-primary-hover:#184eb8;--tgbl-primary-hover-background:#1d59d0;--tgbl-primary-hover-border:var(--tgbl-primary-hover-background);--tgbl-primary-hover-underline:var(--tgbl-primary-hover);--tgbl-primary-focus:rgba(116,139,248,.5);--tgbl-primary-inverse:#fff;--tgbl-secondary:#5d6b89;--tgbl-secondary-background:#525f7a;--tgbl-secondary-border:var(--tgbl-secondary-background);--tgbl-secondary-underline:rgba(93,107,137,.5);--tgbl-secondary-hover:#48536b;--tgbl-secondary-hover-background:#48536b;--tgbl-secondary-hover-border:var(--tgbl-secondary-hover-background);--tgbl-secondary-hover-underline:var(--tgbl-secondary-hover);--tgbl-secondary-focus:rgba(93,107,137,.25);--tgbl-secondary-inverse:#fff;--tgbl-contrast:#181c25;--tgbl-contrast-background:#181c25;--tgbl-contrast-border:var(--tgbl-contrast-background);--tgbl-contrast-underline:rgba(24,28,37,.5);--tgbl-contrast-hover:#000;--tgbl-contrast-hover-background:#000;--tgbl-contrast-hover-border:var(--tgbl-contrast-hover-background);--tgbl-contrast-hover-underline:var(--tgbl-secondary-hover);--tgbl-contrast-focus:rgba(93,107,137,.25);--tgbl-contrast-inverse:#fff;--tgbl-box-shadow:0.0145rem 0.029rem 0.174rem rgba(129,145,181,.017),0.0335rem 0.067rem 0.402rem rgba(129,145,181,.024),0.0625rem 0.125rem 0.75rem rgba(129,145,181,.03),0.1125rem 0.225rem 1.35rem rgba(129,145,181,.036),0.2085rem 0.417rem 2.502rem rgba(129,145,181,.043),0.5rem 1rem 6rem rgba(129,145,181,.06),0 0 0 0.0625rem rgba(129,145,181,.015);--tgbl-h1-color:#2d3138;--tgbl-h2-color:#373c44;--tgbl-h3-color:#424751;--tgbl-h4-color:#4d535e;--tgbl-h5-color:#5c6370;--tgbl-h6-color:#646b79;--tgbl-mark-background-color:#fde7c0;--tgbl-mark-color:#0f1114;--tgbl-ins-color:#1d6a54;--tgbl-del-color:#883935;--tgbl-blockquote-border-color:var(--tgbl-muted-border-color);--tgbl-blockquote-footer-color:var(--tgbl-muted-color);--tgbl-button-box-shadow:0 0 0 transparent;--tgbl-button-hover-box-shadow:0 0 0 transparent;--tgbl-table-border-color:var(--tgbl-muted-border-color);--tgbl-table-row-stripped-background-color:rgba(111,120,135,.038);--tgbl-code-background-color:#f3f5f7;--tgbl-code-color:#646b79;--tgbl-code-kbd-background-color:var(--tgbl-color);--tgbl-code-kbd-color:var(--tgbl-background-color);--tgbl-form-element-background-color:#fbfcfc;--tgbl-form-element-selected-background-color:#dfe3eb;--tgbl-form-element-border-color:#cfd5e2;--tgbl-form-element-color:#23262c;--tgbl-form-element-placeholder-color:var(--tgbl-muted-color);--tgbl-form-element-active-background-color:#fff;--tgbl-form-element-active-border-color:var(--tgbl-primary-border);--tgbl-form-element-focus-color:var(--tgbl-primary-border);--tgbl-form-element-disabled-opacity:0.5;--tgbl-form-element-invalid-border-color:#b86a6b;--tgbl-form-element-invalid-active-border-color:#c84f48;--tgbl-form-element-invalid-focus-color:var(--tgbl-form-element-invalid-active-border-color);--tgbl-form-element-valid-border-color:#4c9b8a;--tgbl-form-element-valid-active-border-color:#279977;--tgbl-form-element-valid-focus-color:var(--tgbl-form-element-valid-active-border-color);--tgbl-switch-background-color:#bfc7d9;--tgbl-switch-checked-background-color:var(--tgbl-primary-background);--tgbl-switch-color:#fff;--tgbl-switch-thumb-box-shadow:0 0 0 transparent;--tgbl-range-border-color:#dfe3eb;--tgbl-range-active-border-color:#bfc7d9;--tgbl-range-thumb-border-color:var(--tgbl-background-color);--tgbl-range-thumb-color:var(--tgbl-secondary-background);--tgbl-range-thumb-active-color:var(--tgbl-primary-background);--tgbl-accordion-border-color:var(--tgbl-muted-border-color);--tgbl-accordion-active-summary-color:var(--tgbl-primary-hover);--tgbl-accordion-close-summary-color:var(--tgbl-color);--tgbl-accordion-open-summary-color:var(--tgbl-muted-color);--tgbl-card-background-color:var(--tgbl-background-color);--tgbl-card-border-color:var(--tgbl-muted-border-color);--tgbl-card-box-shadow:var(--tgbl-box-shadow);--tgbl-card-sectioning-background-color:#fbfcfc;--tgbl-dropdown-background-color:#fff;--tgbl-dropdown-border-color:#eff1f4;--tgbl-dropdown-box-shadow:var(--tgbl-box-shadow);--tgbl-dropdown-color:var(--tgbl-color);--tgbl-dropdown-hover-background-color:#eff1f4;--tgbl-loading-spinner-opacity:0.5;--tgbl-modal-overlay-background-color:rgba(232,234,237,.75);--tgbl-progress-background-color:#dfe3eb;--tgbl-progress-color:var(--tgbl-primary-background);--tgbl-tooltip-background-color:var(--tgbl-contrast-background);--tgbl-tooltip-color:var(--tgbl-contrast-inverse);--tgbl-icon-valid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234C9B8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--tgbl-icon-invalid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23C84F48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E");color-scheme:light}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--tgbl-form-element-focus-color:var(--tgbl-primary-focus)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]){--tgbl-background-color:#13171f;--tgbl-color:#c2c7d0;--tgbl-text-selection-color:rgba(137,153,249,.188);--tgbl-muted-color:#7b8495;--tgbl-muted-border-color:#202632;--tgbl-primary:#8999f9;--tgbl-primary-background:#2060df;--tgbl-primary-border:var(--tgbl-primary-background);--tgbl-primary-underline:rgba(137,153,249,.5);--tgbl-primary-hover:#aeb5fb;--tgbl-primary-hover-background:#3c71f7;--tgbl-primary-hover-border:var(--tgbl-primary-hover-background);--tgbl-primary-hover-underline:var(--tgbl-primary-hover);--tgbl-primary-focus:rgba(137,153,249,.375);--tgbl-primary-inverse:#fff;--tgbl-secondary:#969eaf;--tgbl-secondary-background:#525f7a;--tgbl-secondary-border:var(--tgbl-secondary-background);--tgbl-secondary-underline:rgba(150,158,175,.5);--tgbl-secondary-hover:#b3b9c5;--tgbl-secondary-hover-background:#5d6b89;--tgbl-secondary-hover-border:var(--tgbl-secondary-hover-background);--tgbl-secondary-hover-underline:var(--tgbl-secondary-hover);--tgbl-secondary-focus:rgba(144,158,190,.25);--tgbl-secondary-inverse:#fff;--tgbl-contrast:#dfe3eb;--tgbl-contrast-background:#eff1f4;--tgbl-contrast-border:var(--tgbl-contrast-background);--tgbl-contrast-underline:rgba(223,227,235,.5);--tgbl-contrast-hover:#fff;--tgbl-contrast-hover-background:#fff;--tgbl-contrast-hover-border:var(--tgbl-contrast-hover-background);--tgbl-contrast-hover-underline:var(--tgbl-contrast-hover);--tgbl-contrast-focus:rgba(207,213,226,.25);--tgbl-contrast-inverse:#000;--tgbl-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7,9,12,.017),0.0335rem 0.067rem 0.402rem rgba(7,9,12,.024),0.0625rem 0.125rem 0.75rem rgba(7,9,12,.03),0.1125rem 0.225rem 1.35rem rgba(7,9,12,.036),0.2085rem 0.417rem 2.502rem rgba(7,9,12,.043),0.5rem 1rem 6rem rgba(7,9,12,.06),0 0 0 0.0625rem rgba(7,9,12,.015);--tgbl-h1-color:#f0f1f3;--tgbl-h2-color:#e0e3e7;--tgbl-h3-color:#c2c7d0;--tgbl-h4-color:#b3b9c5;--tgbl-h5-color:#a4acba;--tgbl-h6-color:#8891a4;--tgbl-mark-background-color:#014063;--tgbl-mark-color:#fff;--tgbl-ins-color:#62af9a;--tgbl-del-color:#ce7e7b;--tgbl-blockquote-border-color:var(--tgbl-muted-border-color);--tgbl-blockquote-footer-color:var(--tgbl-muted-color);--tgbl-button-box-shadow:0 0 0 transparent;--tgbl-button-hover-box-shadow:0 0 0 transparent;--tgbl-table-border-color:var(--tgbl-muted-border-color);--tgbl-table-row-stripped-background-color:rgba(111,120,135,.038);--tgbl-code-background-color:#1a1f28;--tgbl-code-color:#8891a4;--tgbl-code-kbd-background-color:var(--tgbl-color);--tgbl-code-kbd-color:var(--tgbl-background-color);--tgbl-form-element-background-color:#1c212c;--tgbl-form-element-selected-background-color:#2a3140;--tgbl-form-element-border-color:#2a3140;--tgbl-form-element-color:#e0e3e7;--tgbl-form-element-placeholder-color:#8891a4;--tgbl-form-element-active-background-color:#1a1f28;--tgbl-form-element-active-border-color:var(--tgbl-primary-border);--tgbl-form-element-focus-color:var(--tgbl-primary-border);--tgbl-form-element-disabled-opacity:0.5;--tgbl-form-element-invalid-border-color:#964a50;--tgbl-form-element-invalid-active-border-color:#b7403b;--tgbl-form-element-invalid-focus-color:var(--tgbl-form-element-invalid-active-border-color);--tgbl-form-element-valid-border-color:#2a7b6f;--tgbl-form-element-valid-active-border-color:#16896a;--tgbl-form-element-valid-focus-color:var(--tgbl-form-element-valid-active-border-color);--tgbl-switch-background-color:#333c4e;--tgbl-switch-checked-background-color:var(--tgbl-primary-background);--tgbl-switch-color:#fff;--tgbl-switch-thumb-box-shadow:0 0 0 transparent;--tgbl-range-border-color:#202632;--tgbl-range-active-border-color:#2a3140;--tgbl-range-thumb-border-color:var(--tgbl-background-color);--tgbl-range-thumb-color:var(--tgbl-secondary-background);--tgbl-range-thumb-active-color:var(--tgbl-primary-background);--tgbl-accordion-border-color:var(--tgbl-muted-border-color);--tgbl-accordion-active-summary-color:var(--tgbl-primary-hover);--tgbl-accordion-close-summary-color:var(--tgbl-color);--tgbl-accordion-open-summary-color:var(--tgbl-muted-color);--tgbl-card-background-color:#181c25;--tgbl-card-border-color:var(--tgbl-card-background-color);--tgbl-card-box-shadow:var(--tgbl-box-shadow);--tgbl-card-sectioning-background-color:#1a1f28;--tgbl-dropdown-background-color:#181c25;--tgbl-dropdown-border-color:#202632;--tgbl-dropdown-box-shadow:var(--tgbl-box-shadow);--tgbl-dropdown-color:var(--tgbl-color);--tgbl-dropdown-hover-background-color:#202632;--tgbl-loading-spinner-opacity:0.5;--tgbl-modal-overlay-background-color:rgba(8,9,10,.75);--tgbl-progress-background-color:#202632;--tgbl-progress-color:var(--tgbl-primary-background);--tgbl-tooltip-background-color:var(--tgbl-contrast-background);--tgbl-tooltip-color:var(--tgbl-contrast-inverse);--tgbl-icon-valid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232A7B6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--tgbl-icon-invalid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23964A50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E");color-scheme:dark}:root:not([data-theme]) .tgbl-interface [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline):before{filter:brightness(0)}:root:not([data-theme]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--tgbl-form-element-focus-color:var(--tgbl-primary-focus)}:root:not([data-theme]) .tgbl-interface details summary[role=button].contrast:not(.outline):after{filter:brightness(0)}}[data-theme=dark]{--tgbl-background-color:#13171f;--tgbl-color:#c2c7d0;--tgbl-text-selection-color:rgba(137,153,249,.188);--tgbl-muted-color:#7b8495;--tgbl-muted-border-color:#202632;--tgbl-primary:#8999f9;--tgbl-primary-background:#2060df;--tgbl-primary-border:var(--tgbl-primary-background);--tgbl-primary-underline:rgba(137,153,249,.5);--tgbl-primary-hover:#aeb5fb;--tgbl-primary-hover-background:#3c71f7;--tgbl-primary-hover-border:var(--tgbl-primary-hover-background);--tgbl-primary-hover-underline:var(--tgbl-primary-hover);--tgbl-primary-focus:rgba(137,153,249,.375);--tgbl-primary-inverse:#fff;--tgbl-secondary:#969eaf;--tgbl-secondary-background:#525f7a;--tgbl-secondary-border:var(--tgbl-secondary-background);--tgbl-secondary-underline:rgba(150,158,175,.5);--tgbl-secondary-hover:#b3b9c5;--tgbl-secondary-hover-background:#5d6b89;--tgbl-secondary-hover-border:var(--tgbl-secondary-hover-background);--tgbl-secondary-hover-underline:var(--tgbl-secondary-hover);--tgbl-secondary-focus:rgba(144,158,190,.25);--tgbl-secondary-inverse:#fff;--tgbl-contrast:#dfe3eb;--tgbl-contrast-background:#eff1f4;--tgbl-contrast-border:var(--tgbl-contrast-background);--tgbl-contrast-underline:rgba(223,227,235,.5);--tgbl-contrast-hover:#fff;--tgbl-contrast-hover-background:#fff;--tgbl-contrast-hover-border:var(--tgbl-contrast-hover-background);--tgbl-contrast-hover-underline:var(--tgbl-contrast-hover);--tgbl-contrast-focus:rgba(207,213,226,.25);--tgbl-contrast-inverse:#000;--tgbl-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7,9,12,.017),0.0335rem 0.067rem 0.402rem rgba(7,9,12,.024),0.0625rem 0.125rem 0.75rem rgba(7,9,12,.03),0.1125rem 0.225rem 1.35rem rgba(7,9,12,.036),0.2085rem 0.417rem 2.502rem rgba(7,9,12,.043),0.5rem 1rem 6rem rgba(7,9,12,.06),0 0 0 0.0625rem rgba(7,9,12,.015);--tgbl-h1-color:#f0f1f3;--tgbl-h2-color:#e0e3e7;--tgbl-h3-color:#c2c7d0;--tgbl-h4-color:#b3b9c5;--tgbl-h5-color:#a4acba;--tgbl-h6-color:#8891a4;--tgbl-mark-background-color:#014063;--tgbl-mark-color:#fff;--tgbl-ins-color:#62af9a;--tgbl-del-color:#ce7e7b;--tgbl-blockquote-border-color:var(--tgbl-muted-border-color);--tgbl-blockquote-footer-color:var(--tgbl-muted-color);--tgbl-button-box-shadow:0 0 0 transparent;--tgbl-button-hover-box-shadow:0 0 0 transparent;--tgbl-table-border-color:var(--tgbl-muted-border-color);--tgbl-table-row-stripped-background-color:rgba(111,120,135,.038);--tgbl-code-background-color:#1a1f28;--tgbl-code-color:#8891a4;--tgbl-code-kbd-background-color:var(--tgbl-color);--tgbl-code-kbd-color:var(--tgbl-background-color);--tgbl-form-element-background-color:#1c212c;--tgbl-form-element-selected-background-color:#2a3140;--tgbl-form-element-border-color:#2a3140;--tgbl-form-element-color:#e0e3e7;--tgbl-form-element-placeholder-color:#8891a4;--tgbl-form-element-active-background-color:#1a1f28;--tgbl-form-element-active-border-color:var(--tgbl-primary-border);--tgbl-form-element-focus-color:var(--tgbl-primary-border);--tgbl-form-element-disabled-opacity:0.5;--tgbl-form-element-invalid-border-color:#964a50;--tgbl-form-element-invalid-active-border-color:#b7403b;--tgbl-form-element-invalid-focus-color:var(--tgbl-form-element-invalid-active-border-color);--tgbl-form-element-valid-border-color:#2a7b6f;--tgbl-form-element-valid-active-border-color:#16896a;--tgbl-form-element-valid-focus-color:var(--tgbl-form-element-valid-active-border-color);--tgbl-switch-background-color:#333c4e;--tgbl-switch-checked-background-color:var(--tgbl-primary-background);--tgbl-switch-color:#fff;--tgbl-switch-thumb-box-shadow:0 0 0 transparent;--tgbl-range-border-color:#202632;--tgbl-range-active-border-color:#2a3140;--tgbl-range-thumb-border-color:var(--tgbl-background-color);--tgbl-range-thumb-color:var(--tgbl-secondary-background);--tgbl-range-thumb-active-color:var(--tgbl-primary-background);--tgbl-accordion-border-color:var(--tgbl-muted-border-color);--tgbl-accordion-active-summary-color:var(--tgbl-primary-hover);--tgbl-accordion-close-summary-color:var(--tgbl-color);--tgbl-accordion-open-summary-color:var(--tgbl-muted-color);--tgbl-card-background-color:#181c25;--tgbl-card-border-color:var(--tgbl-card-background-color);--tgbl-card-box-shadow:var(--tgbl-box-shadow);--tgbl-card-sectioning-background-color:#1a1f28;--tgbl-dropdown-background-color:#181c25;--tgbl-dropdown-border-color:#202632;--tgbl-dropdown-box-shadow:var(--tgbl-box-shadow);--tgbl-dropdown-color:var(--tgbl-color);--tgbl-dropdown-hover-background-color:#202632;--tgbl-loading-spinner-opacity:0.5;--tgbl-modal-overlay-background-color:rgba(8,9,10,.75);--tgbl-progress-background-color:#202632;--tgbl-progress-color:var(--tgbl-primary-background);--tgbl-tooltip-background-color:var(--tgbl-contrast-background);--tgbl-tooltip-color:var(--tgbl-contrast-inverse);--tgbl-icon-valid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232A7B6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--tgbl-icon-invalid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23964A50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E");color-scheme:dark}[data-theme=dark] .tgbl-interface [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline):before{filter:brightness(0)}[data-theme=dark] input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--tgbl-form-element-focus-color:var(--tgbl-primary-focus)}[data-theme=dark] .tgbl-interface details summary[role=button].contrast:not(.outline):after{filter:brightness(0)}.tgbl-interface [type=checkbox],.tgbl-interface [type=radio],.tgbl-interface [type=range],.tgbl-interface progress{accent-color:var(--tgbl-primary)}*,:after,:before{background-repeat:no-repeat;box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}:where(:root){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--tgbl-background-color);color:var(--tgbl-color);font-family:var(--tgbl-font-family);font-size:var(--tgbl-font-size);font-weight:var(--tgbl-font-weight);line-height:var(--tgbl-line-height);overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-rendering:optimizeLegibility;text-underline-offset:var(--tgbl-text-underline-offset)}body{margin:0;width:100%}main{display:block}.tgbl-interface body>footer,.tgbl-interface body>header,.tgbl-interface body>main{padding-block:var(--tgbl-block-spacing-vertical)}.tgbl-interface section{margin-bottom:var(--tgbl-block-spacing-vertical)}.container,.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--tgbl-spacing);padding-right:var(--tgbl-spacing);width:100%}@media (min-width:576px){.container{max-width:510px;padding-left:0;padding-right:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:1024px){.container{max-width:950px}}@media (min-width:1280px){.container{max-width:1200px}}@media (min-width:1536px){.container{max-width:1450px}}.grid{grid-column-gap:var(--tgbl-grid-column-gap);grid-row-gap:var(--tgbl-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}.grid>*{min-width:0}.tgbl-interface .overflow-auto{overflow:auto}.tgbl-interface b,.tgbl-interface strong{font-weight:bolder}.tgbl-interface sub,.tgbl-interface sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}.tgbl-interface sub{bottom:-.25em}.tgbl-interface sup{top:-.5em}.tgbl-interface address,.tgbl-interface blockquote,.tgbl-interface dl,.tgbl-interface ol,.tgbl-interface p,.tgbl-interface pre,.tgbl-interface table,.tgbl-interface ul{color:var(--tgbl-color);font-style:normal;font-weight:var(--tgbl-font-weight);margin-bottom:var(--tgbl-typography-spacing-vertical);margin-top:0}.tgbl-interface h1,.tgbl-interface h2,.tgbl-interface h3,.tgbl-interface h4,.tgbl-interface h5,.tgbl-interface h6{color:var(--tgbl-color);font-family:var(--tgbl-font-family);font-size:var(--tgbl-font-size);font-weight:var(--tgbl-font-weight);line-height:var(--tgbl-line-height);margin-bottom:var(--tgbl-typography-spacing-vertical);margin-top:0}.tgbl-interface h1{--tgbl-color:var(--tgbl-h1-color)}.tgbl-interface h2{--tgbl-color:var(--tgbl-h2-color)}.tgbl-interface h3{--tgbl-color:var(--tgbl-h3-color)}.tgbl-interface h4{--tgbl-color:var(--tgbl-h4-color)}.tgbl-interface h5{--tgbl-color:var(--tgbl-h5-color)}.tgbl-interface h6{--tgbl-color:var(--tgbl-h6-color)}.tgbl-interface :where(article,address,blockquote,dl,figure,form,ol,p,pre,table,ul)~:is(h1,h2,h3,h4,h5,h6){margin-top:var(--tgbl-typography-spacing-top)}.tgbl-interface hgroup,.tgbl-interface p{margin-bottom:var(--tgbl-typography-spacing-vertical)}.tgbl-interface hgroup>*{margin-bottom:0;margin-top:0}.tgbl-interface hgroup>:not(:first-child):last-child{--tgbl-color:var(--tgbl-muted-color);--tgbl-font-weight:unset;font-size:1rem}.tgbl-interface :where(ol,ul) li{margin-bottom:calc(var(--tgbl-typography-spacing-vertical)*.25)}.tgbl-interface :where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--tgbl-typography-spacing-vertical)*.25)}.tgbl-interface ul li{list-style:square}.tgbl-interface mark{background-color:var(--tgbl-mark-background-color);color:var(--tgbl-mark-color);padding:.125rem .25rem;vertical-align:baseline}.tgbl-interface blockquote{border-inline-end:none;border-inline-start:.25rem solid var(--tgbl-blockquote-border-color);border-left:.25rem solid var(--tgbl-blockquote-border-color);border-right:none;display:block;margin:var(--tgbl-typography-spacing-vertical) 0;padding:var(--tgbl-spacing)}.tgbl-interface blockquote footer{color:var(--tgbl-blockquote-footer-color);margin-top:calc(var(--tgbl-typography-spacing-vertical)*.5)}.tgbl-interface abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}.tgbl-interface ins{color:var(--tgbl-ins-color);text-decoration:none}.tgbl-interface del{color:var(--tgbl-del-color)}.tgbl-interface ::-moz-selection{background-color:var(--tgbl-text-selection-color)}.tgbl-interface ::selection{background-color:var(--tgbl-text-selection-color)}.tgbl-interface :where(a:not([role=button])),.tgbl-interface [role=link]{--tgbl-color:var(--tgbl-primary);--tgbl-background-color:transparent;--tgbl-underline:var(--tgbl-primary-underline);background-color:var(--tgbl-background-color);color:var(--tgbl-color);outline:none;-webkit-text-decoration:var(--tgbl-text-decoration);text-decoration:var(--tgbl-text-decoration);text-decoration-color:var(--tgbl-underline);text-underline-offset:.125em;transition:background-color var(--tgbl-transition),color var(--tgbl-transition),box-shadow var(--tgbl-transition),-webkit-text-decoration var(--tgbl-transition);transition:background-color var(--tgbl-transition),color var(--tgbl-transition),text-decoration var(--tgbl-transition),box-shadow var(--tgbl-transition);transition:background-color var(--tgbl-transition),color var(--tgbl-transition),text-decoration var(--tgbl-transition),box-shadow var(--tgbl-transition),-webkit-text-decoration var(--tgbl-transition)}.tgbl-interface :where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.tgbl-interface [role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-color:var(--tgbl-primary-hover);--tgbl-underline:var(--tgbl-primary-hover-underline);--tgbl-text-decoration:underline}.tgbl-interface :where(a:not([role=button])):focus-visible,.tgbl-interface [role=link]:focus-visible{box-shadow:0 0 0 var(--tgbl-outline-width) var(--tgbl-primary-focus)}.tgbl-interface :where(a:not([role=button])).secondary,.tgbl-interface [role=link].secondary{--tgbl-color:var(--tgbl-secondary);--tgbl-underline:var(--tgbl-secondary-underline)}.tgbl-interface :where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.tgbl-interface [role=link].secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-color:var(--tgbl-secondary-hover);--tgbl-underline:var(--tgbl-secondary-hover-underline)}.tgbl-interface :where(a:not([role=button])).contrast,.tgbl-interface [role=link].contrast{--tgbl-color:var(--tgbl-contrast);--tgbl-underline:var(--tgbl-contrast-underline)}.tgbl-interface :where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.tgbl-interface [role=link].contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-color:var(--tgbl-contrast-hover);--tgbl-underline:var(--tgbl-contrast-hover-underline)}.tgbl-interface a[role=button]{display:inline-block}.tgbl-interface button{font-family:inherit;margin:0;overflow:visible;text-transform:none}.tgbl-interface [type=button],.tgbl-interface [type=reset],.tgbl-interface [type=submit],.tgbl-interface button{-webkit-appearance:button}.tgbl-interface [role=button],.tgbl-interface [type=button],.tgbl-interface [type=file]::file-selector-button,.tgbl-interface [type=reset],.tgbl-interface [type=submit],.tgbl-interface button{--tgbl-background-color:var(--tgbl-primary-background);--tgbl-border-color:var(--tgbl-primary-border);--tgbl-color:var(--tgbl-primary-inverse);--tgbl-box-shadow:var(--tgbl-button-box-shadow,0 0 0 transparent);background-color:var(--tgbl-background-color);border:var(--tgbl-border-width) solid var(--tgbl-border-color);border-radius:var(--tgbl-border-radius);box-shadow:var(--tgbl-box-shadow);color:var(--tgbl-color);cursor:pointer;font-size:1rem;font-weight:var(--tgbl-font-weight);line-height:var(--tgbl-line-height);outline:none;padding:var(--tgbl-form-element-spacing-vertical) var(--tgbl-form-element-spacing-horizontal);text-align:center;text-decoration:none;transition:background-color var(--tgbl-transition),border-color var(--tgbl-transition),color var(--tgbl-transition),box-shadow var(--tgbl-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.tgbl-interface [role=button]:is(:hover,:active,:focus),.tgbl-interface [role=button]:is([aria-current]:not([aria-current=false])),.tgbl-interface [type=button]:is(:hover,:active,:focus),.tgbl-interface [type=button]:is([aria-current]:not([aria-current=false])),.tgbl-interface [type=file]::file-selector-button:is(:hover,:active,:focus),.tgbl-interface [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),.tgbl-interface [type=reset]:is(:hover,:active,:focus),.tgbl-interface [type=reset]:is([aria-current]:not([aria-current=false])),.tgbl-interface [type=submit]:is(:hover,:active,:focus),.tgbl-interface [type=submit]:is([aria-current]:not([aria-current=false])),.tgbl-interface button:is(:hover,:active,:focus),.tgbl-interface button:is([aria-current]:not([aria-current=false])){--tgbl-background-color:var(--tgbl-primary-hover-background);--tgbl-border-color:var(--tgbl-primary-hover-border);--tgbl-box-shadow:var(--tgbl-button-hover-box-shadow,0 0 0 transparent);--tgbl-color:var(--tgbl-primary-inverse)}.tgbl-interface [role=button]:focus,.tgbl-interface [role=button]:is([aria-current]:not([aria-current=false])):focus,.tgbl-interface [type=button]:focus,.tgbl-interface [type=button]:is([aria-current]:not([aria-current=false])):focus,.tgbl-interface [type=file]::file-selector-button:focus,.tgbl-interface [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,.tgbl-interface [type=reset]:focus,.tgbl-interface [type=reset]:is([aria-current]:not([aria-current=false])):focus,.tgbl-interface [type=submit]:focus,.tgbl-interface [type=submit]:is([aria-current]:not([aria-current=false])):focus,.tgbl-interface button:focus,.tgbl-interface button:is([aria-current]:not([aria-current=false])):focus{--tgbl-box-shadow:var(--tgbl-button-hover-box-shadow,0 0 0 transparent),0 0 0 var(--tgbl-outline-width) var(--tgbl-primary-focus)}.tgbl-interface [type=button],.tgbl-interface [type=reset],.tgbl-interface [type=submit]{margin-bottom:var(--tgbl-spacing)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).secondary,.tgbl-interface [type=file]::file-selector-button,.tgbl-interface [type=reset]{--tgbl-background-color:var(--tgbl-secondary-background);--tgbl-border-color:var(--tgbl-secondary-border);--tgbl-color:var(--tgbl-secondary-inverse);cursor:pointer}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.tgbl-interface [type=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.tgbl-interface [type=reset]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-background-color:var(--tgbl-secondary-hover-background);--tgbl-border-color:var(--tgbl-secondary-hover-border);--tgbl-color:var(--tgbl-secondary-inverse)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).secondary:focus,.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false])):focus,.tgbl-interface [type=file]::file-selector-button:focus,.tgbl-interface [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,.tgbl-interface [type=reset]:focus,.tgbl-interface [type=reset]:is([aria-current]:not([aria-current=false])):focus{--tgbl-box-shadow:var(--tgbl-button-hover-box-shadow,0 0 0 transparent),0 0 0 var(--tgbl-outline-width) var(--tgbl-secondary-focus)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).contrast{--tgbl-background-color:var(--tgbl-contrast-background);--tgbl-border-color:var(--tgbl-contrast-border);--tgbl-color:var(--tgbl-contrast-inverse)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-background-color:var(--tgbl-contrast-hover-background);--tgbl-border-color:var(--tgbl-contrast-hover-border);--tgbl-color:var(--tgbl-contrast-inverse)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).contrast:focus,.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false])):focus{--tgbl-box-shadow:var(--tgbl-button-hover-box-shadow,0 0 0 transparent),0 0 0 var(--tgbl-outline-width) var(--tgbl-contrast-focus)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).outline,[type=reset].outline{--tgbl-background-color:transparent;--tgbl-color:var(--tgbl-primary);--tgbl-border-color:var(--tgbl-primary)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-background-color:transparent;--tgbl-color:var(--tgbl-primary-hover);--tgbl-border-color:var(--tgbl-primary-hover)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).outline.secondary,[type=reset].outline{--tgbl-color:var(--tgbl-secondary);--tgbl-border-color:var(--tgbl-secondary)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).outline.secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-color:var(--tgbl-secondary-hover);--tgbl-border-color:var(--tgbl-secondary-hover)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).outline.contrast{--tgbl-color:var(--tgbl-contrast);--tgbl-border-color:var(--tgbl-contrast)}.tgbl-interface :is(button,[type=submit],[type=button],[role=button]).outline.contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--tgbl-color:var(--tgbl-contrast-hover);--tgbl-border-color:var(--tgbl-contrast-hover)}.tgbl-interface :where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled],.tgbl-interface :where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}.tgbl-interface :where(table){border-collapse:collapse;border-spacing:0;text-indent:0;width:100%}.tgbl-interface td,.tgbl-interface th{background-color:var(--tgbl-background-color);border-bottom:var(--tgbl-border-width) solid var(--tgbl-table-border-color);color:var(--tgbl-color);font-weight:var(--tgbl-font-weight);padding:calc(var(--tgbl-spacing)/2) var(--tgbl-spacing);text-align:left;text-align:start}.tgbl-interface tfoot td,.tgbl-interface tfoot th{border-bottom:0;border-top:var(--tgbl-border-width) solid var(--tgbl-table-border-color)}.tgbl-interface table.striped tbody tr:nth-child(odd) td,.tgbl-interface table.striped tbody tr:nth-child(odd) th{background-color:var(--tgbl-table-row-stripped-background-color)}.tgbl-interface :where(audio,canvas,iframe,img,svg,video){vertical-align:middle}.tgbl-interface audio,.tgbl-interface video{display:inline-block}.tgbl-interface audio:not([controls]){display:none;height:0}.tgbl-interface :where(iframe){border-style:none}.tgbl-interface img{border-style:none;height:auto;max-width:100%}.tgbl-interface :where(svg:not([fill])){fill:currentColor}.tgbl-interface svg:not(:root){overflow:hidden}.tgbl-interface code,.tgbl-interface kbd,.tgbl-interface pre,.tgbl-interface samp{font-family:var(--tgbl-font-family);font-size:.875em}.tgbl-interface pre code{font-family:inherit;font-size:inherit}.tgbl-interface pre{-ms-overflow-style:scrollbar;overflow:auto}.tgbl-interface code,.tgbl-interface kbd,.tgbl-interface pre{background:var(--tgbl-code-background-color);border-radius:var(--tgbl-border-radius);color:var(--tgbl-code-color);font-weight:var(--tgbl-font-weight);line-height:normal}.tgbl-interface code,.tgbl-interface kbd{display:inline-block;padding:.375rem}.tgbl-interface pre{display:block;margin-bottom:var(--tgbl-spacing);overflow-x:auto}.tgbl-interface pre>code{background:none;display:block;line-height:var(--tgbl-line-height);padding:var(--tgbl-spacing)}.tgbl-interface kbd{background-color:var(--tgbl-code-kbd-background-color);color:var(--tgbl-code-kbd-color);vertical-align:baseline}.tgbl-interface figure{display:block;margin:0;padding:0}.tgbl-interface figure figcaption{color:var(--tgbl-muted-color);padding:calc(var(--tgbl-spacing)*.5) 0}.tgbl-interface hr{border:0;border-top:1px solid var(--tgbl-muted-border-color);color:inherit;height:0;margin:var(--tgbl-typography-spacing-vertical) 0}.tgbl-interface [hidden],.tgbl-interface template{display:none!important}.tgbl-interface canvas{display:inline-block}.tgbl-interface input,.tgbl-interface optgroup,.tgbl-interface select,.tgbl-interface textarea{font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--tgbl-line-height);margin:0}.tgbl-interface input{overflow:visible}.tgbl-interface select{text-transform:none}.tgbl-interface legend{color:inherit;max-width:100%;padding:0;white-space:normal}.tgbl-interface textarea{overflow:auto}.tgbl-interface [type=checkbox],.tgbl-interface [type=radio]{padding:0}.tgbl-interface ::-webkit-inner-spin-button,.tgbl-interface ::-webkit-outer-spin-button{height:auto}.tgbl-interface [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.tgbl-interface [type=search]::-webkit-search-decoration{-webkit-appearance:none}.tgbl-interface ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.tgbl-interface ::-moz-focus-inner{border-style:none;padding:0}.tgbl-interface :-moz-focusring{outline:none}.tgbl-interface :-moz-ui-invalid{box-shadow:none}.tgbl-interface ::-ms-expand{display:none}.tgbl-interface [type=file],.tgbl-interface [type=range]{border-width:0;padding:0}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range]){height:calc(1rem*var(--tgbl-line-height) + var(--tgbl-form-element-spacing-vertical)*2 + var(--tgbl-border-width)*2)}.tgbl-interface fieldset{border:0;margin:0;margin-bottom:var(--tgbl-spacing);padding:0;width:100%}.tgbl-interface fieldset legend,.tgbl-interface label{color:var(--tgbl-color);display:block;font-weight:var(--tgbl-form-label-font-weight,var(--tgbl-font-weight));margin-bottom:calc(var(--tgbl-spacing)*.375)}.tgbl-interface fieldset legend{margin-bottom:calc(var(--tgbl-spacing)*.5)}.tgbl-interface button[type=submit],.tgbl-interface input:not([type=checkbox],[type=radio]),.tgbl-interface select,.tgbl-interface textarea{width:100%}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range],[type=file]),.tgbl-interface select,.tgbl-interface textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--tgbl-form-element-spacing-vertical) var(--tgbl-form-element-spacing-horizontal)}.tgbl-interface input,.tgbl-interface select,.tgbl-interface textarea{--tgbl-background-color:var(--tgbl-form-element-background-color);--tgbl-border-color:var(--tgbl-form-element-border-color);--tgbl-color:var(--tgbl-form-element-color);--tgbl-box-shadow:none;background-color:var(--tgbl-background-color);border:var(--tgbl-border-width) solid var(--tgbl-border-color);border-radius:var(--tgbl-border-radius);box-shadow:var(--tgbl-box-shadow);color:var(--tgbl-color);font-weight:var(--tgbl-font-weight);outline:none;transition:background-color var(--tgbl-transition),border-color var(--tgbl-transition),color var(--tgbl-transition),box-shadow var(--tgbl-transition)}.tgbl-interface :where(select,textarea):not([readonly]):is(:active,:focus),.tgbl-interface input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--tgbl-background-color:var(--tgbl-form-element-active-background-color)}.tgbl-interface :where(select,textarea):not([readonly]):is(:active,:focus),.tgbl-interface input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--tgbl-border-color:var(--tgbl-form-element-active-border-color)}.tgbl-interface :where(select,textarea):not([readonly]):focus,.tgbl-interface input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--tgbl-box-shadow:0 0 0 var(--tgbl-outline-width) var(--tgbl-form-element-focus-color)}.tgbl-interface :where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),.tgbl-interface input:not([type=submit],[type=button],[type=reset])[disabled],.tgbl-interface label[aria-disabled=true],.tgbl-interface select[disabled],.tgbl-interface textarea[disabled]{opacity:var(--tgbl-form-element-disabled-opacity);pointer-events:none}.tgbl-interface label[aria-disabled=true] input[disabled]{opacity:1}.tgbl-interface :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid]{background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto;padding-left:var(--tgbl-form-element-spacing-horizontal);padding-right:calc(var(--tgbl-form-element-spacing-horizontal) + 1.5rem)!important;padding-inline-end:calc(var(--tgbl-form-element-spacing-horizontal) + 1.5rem)!important;padding-inline-start:var(--tgbl-form-element-spacing-horizontal)!important}.tgbl-interface :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=false]:not(select){background-image:var(--tgbl-icon-valid)}.tgbl-interface :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=true]:not(select){background-image:var(--tgbl-icon-invalid)}.tgbl-interface :where(input,select,textarea)[aria-invalid=false]{--tgbl-border-color:var(--tgbl-form-element-valid-border-color)}.tgbl-interface :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus){--tgbl-border-color:var(--tgbl-form-element-valid-active-border-color)!important}.tgbl-interface :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus):not([type=checkbox],[type=radio]){--tgbl-box-shadow:0 0 0 var(--tgbl-outline-width) var(--tgbl-form-element-valid-focus-color)!important}.tgbl-interface :where(input,select,textarea)[aria-invalid=true]{--tgbl-border-color:var(--tgbl-form-element-invalid-border-color)}.tgbl-interface :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus){--tgbl-border-color:var(--tgbl-form-element-invalid-active-border-color)!important}.tgbl-interface :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus):not([type=checkbox],[type=radio]){--tgbl-box-shadow:0 0 0 var(--tgbl-outline-width) var(--tgbl-form-element-invalid-focus-color)!important}[dir=rtl] .tgbl-interface :where(input,select,textarea):not([type=checkbox],[type=radio]):is([aria-invalid],[aria-invalid=true],[aria-invalid=false]){background-position:center left .75rem}.tgbl-interface input::-webkit-input-placeholder,.tgbl-interface input::placeholder,.tgbl-interface select:invalid,.tgbl-interface textarea::-webkit-input-placeholder,.tgbl-interface textarea::placeholder{color:var(--tgbl-form-element-placeholder-color);opacity:1}.tgbl-interface input:not([type=checkbox],[type=radio]),.tgbl-interface select,.tgbl-interface textarea{margin-bottom:var(--tgbl-spacing)}.tgbl-interface select::-ms-expand{background-color:transparent;border:0}.tgbl-interface select:not([multiple],[size]){background-image:var(--tgbl-icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto;padding-left:var(--tgbl-form-element-spacing-horizontal);padding-right:calc(var(--tgbl-form-element-spacing-horizontal) + 1.5rem);padding-inline-end:calc(var(--tgbl-form-element-spacing-horizontal) + 1.5rem);padding-inline-start:var(--tgbl-form-element-spacing-horizontal)}.tgbl-interface select[multiple] option:checked{background:var(--tgbl-form-element-selected-background-color);color:var(--tgbl-form-element-color)}[dir=rtl] .tgbl-interface select:not([multiple],[size]){background-position:center left .75rem}.tgbl-interface textarea{display:block;resize:vertical}.tgbl-interface textarea[aria-invalid]{--tgbl-icon-height:calc(1rem*var(--tgbl-line-height) + var(--tgbl-form-element-spacing-vertical)*2 + var(--tgbl-border-width)*2);background-position:top right .75rem!important;background-size:1rem var(--tgbl-icon-height)!important}.tgbl-interface :where(input,select,textarea,fieldset,.grid)+small{color:var(--tgbl-muted-color);display:block;margin-bottom:var(--tgbl-spacing);margin-top:calc(var(--tgbl-spacing)*-.75);width:100%}.tgbl-interface :where(input,select,textarea,fieldset,.grid)[aria-invalid=false]+small{color:var(--tgbl-ins-color)}.tgbl-interface :where(input,select,textarea,fieldset,.grid)[aria-invalid=true]+small{color:var(--tgbl-del-color)}.tgbl-interface label>:where(input,select,textarea){margin-top:calc(var(--tgbl-spacing)*.25)}.tgbl-interface label:has([type=checkbox],[type=radio]){cursor:pointer;width:-moz-fit-content;width:fit-content}.tgbl-interface [type=checkbox],.tgbl-interface [type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:var(--tgbl-border-width);cursor:pointer;height:1.25em;margin-top:-.125em;margin-inline-end:.5em;vertical-align:middle;width:1.25em}.tgbl-interface [type=checkbox]::-ms-check,.tgbl-interface [type=radio]::-ms-check{display:none}.tgbl-interface [type=checkbox]:checked,.tgbl-interface [type=checkbox]:checked:active,.tgbl-interface [type=checkbox]:checked:focus,.tgbl-interface [type=radio]:checked,.tgbl-interface [type=radio]:checked:active,.tgbl-interface [type=radio]:checked:focus{--tgbl-background-color:var(--tgbl-primary-background);--tgbl-border-color:var(--tgbl-primary-border);background-image:var(--tgbl-icon-checkbox);background-position:50%;background-repeat:no-repeat;background-size:.75em auto}.tgbl-interface [type=checkbox]~label,.tgbl-interface [type=radio]~label{cursor:pointer;display:inline-block;margin-bottom:0}.tgbl-interface [type=checkbox]~label:not(:last-of-type),.tgbl-interface [type=radio]~label:not(:last-of-type){margin-inline-end:1em}.tgbl-interface [type=checkbox]:indeterminate{--tgbl-background-color:var(--tgbl-primary-background);--tgbl-border-color:var(--tgbl-primary-border);background-image:var(--tgbl-icon-minus);background-position:50%;background-repeat:no-repeat;background-size:.75em auto}.tgbl-interface [type=radio]{border-radius:50%}.tgbl-interface [type=radio]:checked,.tgbl-interface [type=radio]:checked:active,.tgbl-interface [type=radio]:checked:focus{--tgbl-background-color:var(--tgbl-primary-inverse);background-image:none;border-width:.35em}.tgbl-interface [type=checkbox][role=switch]{--tgbl-background-color:var(--tgbl-switch-background-color);--tgbl-color:var(--tgbl-switch-color);background-color:var(--tgbl-background-color);border:var(--tgbl-border-width) solid var(--tgbl-border-color);border-radius:1.25em;height:1.25em;line-height:1.25em;width:2.25em}.tgbl-interface [type=checkbox][role=switch]:not([aria-invalid]){--tgbl-border-color:var(--tgbl-switch-background-color)}.tgbl-interface [type=checkbox][role=switch]:before{aspect-ratio:1;background-color:var(--tgbl-color);border-radius:50%;box-shadow:var(--tgbl-switch-thumb-box-shadow);content:"";display:block;height:100%;transition:margin .1s ease-in-out}.tgbl-interface [type=checkbox][role=switch]:focus{--tgbl-background-color:var(--tgbl-switch-background-color);--tgbl-border-color:var(--tgbl-switch-background-color)}.tgbl-interface [type=checkbox][role=switch]:checked{--tgbl-background-color:var(--tgbl-switch-checked-background-color);--tgbl-border-color:var(--tgbl-switch-checked-background-color);background-image:none}.tgbl-interface [type=checkbox][role=switch]:checked:before{margin-inline-start:1em}.tgbl-interface [type=checkbox][role=switch][disabled]{--tgbl-background-color:var(--tgbl-border-color)}.tgbl-interface [type=checkbox][aria-invalid=false]:checked,.tgbl-interface [type=checkbox][aria-invalid=false]:checked:active,.tgbl-interface [type=checkbox][aria-invalid=false]:checked:focus,.tgbl-interface [type=checkbox][role=switch][aria-invalid=false]:checked,.tgbl-interface [type=checkbox][role=switch][aria-invalid=false]:checked:active,.tgbl-interface [type=checkbox][role=switch][aria-invalid=false]:checked:focus{--tgbl-background-color:var(--tgbl-form-element-valid-border-color)}.tgbl-interface [type=checkbox]:checked:active[aria-invalid=true],.tgbl-interface [type=checkbox]:checked:focus[aria-invalid=true],.tgbl-interface [type=checkbox]:checked[aria-invalid=true],.tgbl-interface [type=checkbox][role=switch]:checked:active[aria-invalid=true],.tgbl-interface [type=checkbox][role=switch]:checked:focus[aria-invalid=true],.tgbl-interface [type=checkbox][role=switch]:checked[aria-invalid=true]{--tgbl-background-color:var(--tgbl-form-element-invalid-border-color)}.tgbl-interface [type=checkbox][aria-invalid=false]:checked,.tgbl-interface [type=checkbox][aria-invalid=false]:checked:active,.tgbl-interface [type=checkbox][aria-invalid=false]:checked:focus,.tgbl-interface [type=checkbox][role=switch][aria-invalid=false]:checked,.tgbl-interface [type=checkbox][role=switch][aria-invalid=false]:checked:active,.tgbl-interface [type=checkbox][role=switch][aria-invalid=false]:checked:focus,.tgbl-interface [type=radio][aria-invalid=false]:checked,.tgbl-interface [type=radio][aria-invalid=false]:checked:active,.tgbl-interface [type=radio][aria-invalid=false]:checked:focus{--tgbl-border-color:var(--tgbl-form-element-valid-border-color)}.tgbl-interface [type=checkbox]:checked:active[aria-invalid=true],.tgbl-interface [type=checkbox]:checked:focus[aria-invalid=true],.tgbl-interface [type=checkbox]:checked[aria-invalid=true],.tgbl-interface [type=checkbox][role=switch]:checked:active[aria-invalid=true],.tgbl-interface [type=checkbox][role=switch]:checked:focus[aria-invalid=true],.tgbl-interface [type=checkbox][role=switch]:checked[aria-invalid=true],.tgbl-interface [type=radio]:checked:active[aria-invalid=true],.tgbl-interface [type=radio]:checked:focus[aria-invalid=true],.tgbl-interface [type=radio]:checked[aria-invalid=true]{--tgbl-border-color:var(--tgbl-form-element-invalid-border-color)}.tgbl-interface [type=color]::-webkit-color-swatch-wrapper{padding:0}.tgbl-interface [type=color]::-moz-focus-inner{padding:0}.tgbl-interface [type=color]::-webkit-color-swatch{border:0;border-radius:calc(var(--tgbl-border-radius)*.5)}.tgbl-interface [type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--tgbl-border-radius)*.5)}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range],[type=file]):is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--tgbl-icon-position:0.75rem;--tgbl-icon-width:1rem;background-image:var(--tgbl-icon-date);background-position:center right var(--tgbl-icon-position);background-repeat:no-repeat;background-size:var(--tgbl-icon-width) auto;padding-right:calc(var(--tgbl-icon-width) + var(--tgbl-icon-position))}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=time]{background-image:var(--tgbl-icon-time)}.tgbl-interface [type=date]::-webkit-calendar-picker-indicator,.tgbl-interface [type=datetime-local]::-webkit-calendar-picker-indicator,.tgbl-interface [type=month]::-webkit-calendar-picker-indicator,.tgbl-interface [type=time]::-webkit-calendar-picker-indicator,.tgbl-interface [type=week]::-webkit-calendar-picker-indicator{margin-left:var(--tgbl-icon-position);margin-right:calc(var(--tgbl-icon-width)*-1);opacity:0;width:var(--tgbl-icon-width)}@-moz-document url-prefix(){.tgbl-interface [type=date],.tgbl-interface [type=datetime-local],.tgbl-interface [type=month],.tgbl-interface [type=time],.tgbl-interface [type=week]{background-image:none!important;padding-right:var(--tgbl-form-element-spacing-horizontal)!important}}[dir=rtl] .tgbl-interface :is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){text-align:right}.tgbl-interface [type=file]{--tgbl-color:var(--tgbl-muted-color);background:none;border:0;border-radius:0;margin-left:calc(var(--tgbl-outline-width)*-1);padding:calc(var(--tgbl-form-element-spacing-vertical)*.5) 0;padding-left:var(--tgbl-outline-width)}.tgbl-interface [type=file]::file-selector-button{margin-right:calc(var(--tgbl-spacing)/2);padding:calc(var(--tgbl-form-element-spacing-vertical)*.5) var(--tgbl-form-element-spacing-horizontal)}.tgbl-interface [type=file]:is(:hover,:active,:focus)::file-selector-button{--tgbl-background-color:var(--tgbl-secondary-hover-background);--tgbl-border-color:var(--tgbl-secondary-hover-border)}.tgbl-interface [type=file]:focus::file-selector-button{--tgbl-box-shadow:var(--tgbl-button-hover-box-shadow,0 0 0 transparent),0 0 0 var(--tgbl-outline-width) var(--tgbl-secondary-focus)}.tgbl-interface [type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;height:1.25rem;width:100%}.tgbl-interface [type=range]::-webkit-slider-runnable-track{background-color:var(--tgbl-range-border-color);border-radius:var(--tgbl-border-radius);height:.375rem;-webkit-transition:background-color var(--tgbl-transition),box-shadow var(--tgbl-transition);transition:background-color var(--tgbl-transition),box-shadow var(--tgbl-transition);width:100%}.tgbl-interface [type=range]::-moz-range-track{background-color:var(--tgbl-range-border-color);border-radius:var(--tgbl-border-radius);height:.375rem;-moz-transition:background-color var(--tgbl-transition),box-shadow var(--tgbl-transition);transition:background-color var(--tgbl-transition),box-shadow var(--tgbl-transition);width:100%}.tgbl-interface [type=range]::-ms-track{background-color:var(--tgbl-range-border-color);border-radius:var(--tgbl-border-radius);height:.375rem;-ms-transition:background-color var(--tgbl-transition),box-shadow var(--tgbl-transition);transition:background-color var(--tgbl-transition),box-shadow var(--tgbl-transition);width:100%}.tgbl-interface [type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--tgbl-range-thumb-color);border:2px solid var(--tgbl-range-thumb-border-color);border-radius:50%;cursor:pointer;height:1.25rem;margin-top:-.4375rem;-webkit-transition:background-color var(--tgbl-transition),transform var(--tgbl-transition);transition:background-color var(--tgbl-transition),transform var(--tgbl-transition);width:1.25rem}.tgbl-interface [type=range]::-moz-range-thumb{-webkit-appearance:none;background-color:var(--tgbl-range-thumb-color);border:2px solid var(--tgbl-range-thumb-border-color);border-radius:50%;cursor:pointer;height:1.25rem;margin-top:-.4375rem;-moz-transition:background-color var(--tgbl-transition),transform var(--tgbl-transition);transition:background-color var(--tgbl-transition),transform var(--tgbl-transition);width:1.25rem}.tgbl-interface [type=range]::-ms-thumb{-webkit-appearance:none;background-color:var(--tgbl-range-thumb-color);border:2px solid var(--tgbl-range-thumb-border-color);border-radius:50%;cursor:pointer;height:1.25rem;margin-top:-.4375rem;-ms-transition:background-color var(--tgbl-transition),transform var(--tgbl-transition);transition:background-color var(--tgbl-transition),transform var(--tgbl-transition);width:1.25rem}.tgbl-interface [type=range]:active,.tgbl-interface [type=range]:focus-within{--tgbl-range-border-color:var(--tgbl-range-active-border-color);--tgbl-range-thumb-color:var(--tgbl-range-thumb-active-color)}.tgbl-interface [type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}.tgbl-interface [type=range]:active::-moz-range-thumb{transform:scale(1.25)}.tgbl-interface [type=range]:active::-ms-thumb{transform:scale(1.25)}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{background-image:var(--tgbl-icon-search);background-position:center left calc(var(--tgbl-form-element-spacing-horizontal) + .125rem);background-repeat:no-repeat;background-size:1rem auto;padding-inline-start:calc(var(--tgbl-form-element-spacing-horizontal) + 1.75rem)}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{background-position:center left 1.125rem,center right .75rem;padding-inline-start:calc(var(--tgbl-form-element-spacing-horizontal) + 1.75rem)!important}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=false]{background-image:var(--tgbl-icon-search),var(--tgbl-icon-valid)}.tgbl-interface input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=true]{background-image:var(--tgbl-icon-search),var(--tgbl-icon-invalid)}[dir=rtl] .tgbl-interface :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{background-position:center right 1.125rem}[dir=rtl] .tgbl-interface :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{background-position:center right 1.125rem,center left .75rem}.tgbl-interface details{display:block;margin-bottom:var(--tgbl-spacing)}.tgbl-interface details summary{cursor:pointer;line-height:1rem;list-style-type:none;transition:color var(--tgbl-transition)}.tgbl-interface details summary:not([role]){color:var(--tgbl-accordion-close-summary-color)}.tgbl-interface details summary::-webkit-details-marker{display:none}.tgbl-interface details summary::marker{display:none}.tgbl-interface details summary::-moz-list-bullet{list-style-type:none}.tgbl-interface details summary:after{background-image:var(--tgbl-icon-chevron);background-position:100%;background-repeat:no-repeat;background-size:1rem auto;content:"";display:block;float:right;height:1rem;margin-inline-start:calc(var(--tgbl-spacing, 1rem)*.5);transform:rotate(-90deg);transition:transform var(--tgbl-transition);width:1rem}.tgbl-interface details summary:focus{outline:none}.tgbl-interface details summary:focus:not([role]){color:var(--tgbl-accordion-active-summary-color)}.tgbl-interface details summary:focus-visible:not([role]){color:var(--tgbl-primary);outline:var(--tgbl-outline-width) solid var(--tgbl-primary-focus);outline-offset:calc(var(--tgbl-spacing, 1rem)*.5)}.tgbl-interface details summary[role=button]{text-align:left;width:100%}.tgbl-interface details summary[role=button]:after{height:calc(1rem*var(--tgbl-line-height, 1.5))}.tgbl-interface details[open]>summary{margin-bottom:var(--tgbl-spacing)}.tgbl-interface details[open]>summary:not([role]):not(:focus){color:var(--tgbl-accordion-open-summary-color)}.tgbl-interface details[open]>summary:after{transform:rotate(0)}[dir=rtl] .tgbl-interface details summary{text-align:right}[dir=rtl] .tgbl-interface details summary:after{background-position:0;float:left}.tgbl-interface article{background:var(--tgbl-card-background-color);border-radius:var(--tgbl-border-radius);box-shadow:var(--tgbl-card-box-shadow);margin-bottom:var(--tgbl-block-spacing-vertical);padding:var(--tgbl-block-spacing-vertical) var(--tgbl-block-spacing-horizontal)}.tgbl-interface article>footer,.tgbl-interface article>header{background-color:var(--tgbl-card-sectioning-background-color);margin-left:calc(var(--tgbl-block-spacing-horizontal)*-1);margin-right:calc(var(--tgbl-block-spacing-horizontal)*-1);padding:calc(var(--tgbl-block-spacing-vertical)*.66) var(--tgbl-block-spacing-horizontal)}.tgbl-interface article>header{border-bottom:var(--tgbl-border-width) solid var(--tgbl-card-border-color);border-top-left-radius:var(--tgbl-border-radius);border-top-right-radius:var(--tgbl-border-radius);margin-bottom:var(--tgbl-block-spacing-vertical);margin-top:calc(var(--tgbl-block-spacing-vertical)*-1)}.tgbl-interface article>footer{border-bottom-left-radius:var(--tgbl-border-radius);border-bottom-right-radius:var(--tgbl-border-radius);border-top:var(--tgbl-border-width) solid var(--tgbl-card-border-color);margin-bottom:calc(var(--tgbl-block-spacing-vertical)*-1);margin-top:var(--tgbl-block-spacing-vertical)}.tgbl-interface details.dropdown{border-bottom:none;position:relative}.tgbl-interface details.dropdown summary:after,.tgbl-interface details.dropdown>a:after,.tgbl-interface details.dropdown>button:after{background-image:var(--tgbl-icon-chevron);background-position:100%;background-repeat:no-repeat;background-size:1rem auto;content:"";display:block;float:right;height:calc(1rem*var(--tgbl-line-height, 1.5));margin-inline-start:.25rem;transform:rotate(0deg) translateX(.2rem);width:1rem}.tgbl-interface nav details.dropdown{margin-bottom:0}.tgbl-interface details.dropdown summary:not([role]){background-color:var(--tgbl-form-element-background-color);border:var(--tgbl-border-width) solid var(--tgbl-form-element-border-color);border-radius:var(--tgbl-border-radius);color:var(--tgbl-form-element-placeholder-color);cursor:pointer;height:calc(1rem*var(--tgbl-line-height) + var(--tgbl-form-element-spacing-vertical)*2 + var(--tgbl-border-width)*2);line-height:inherit;padding:var(--tgbl-form-element-spacing-vertical) var(--tgbl-form-element-spacing-horizontal);transition:background-color var(--tgbl-transition),border-color var(--tgbl-transition),color var(--tgbl-transition),box-shadow var(--tgbl-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.tgbl-interface details.dropdown summary:not([role]):active,.tgbl-interface details.dropdown summary:not([role]):focus{background-color:var(--tgbl-form-element-active-background-color);border-color:var(--tgbl-form-element-active-border-color)}.tgbl-interface details.dropdown summary:not([role]):focus{box-shadow:0 0 0 var(--tgbl-outline-width) var(--tgbl-form-element-focus-color)}.tgbl-interface details.dropdown summary:not([role]):focus-visible{outline:none}.tgbl-interface details.dropdown summary:not([role])[aria-invalid=false]{--tgbl-form-element-border-color:var(--tgbl-form-element-valid-border-color);--tgbl-form-element-active-border-color:var(--tgbl-form-element-valid-focus-color);--tgbl-form-element-focus-color:var(--tgbl-form-element-valid-focus-color)}.tgbl-interface details.dropdown summary:not([role])[aria-invalid=true]{--tgbl-form-element-border-color:var(--tgbl-form-element-invalid-border-color);--tgbl-form-element-active-border-color:var(--tgbl-form-element-invalid-focus-color);--tgbl-form-element-focus-color:var(--tgbl-form-element-invalid-focus-color)}.tgbl-interface nav details.dropdown{display:inline;margin:calc(var(--tgbl-nav-element-spacing-vertical)*-1) 0}.tgbl-interface nav details.dropdown summary:after{transform:rotate(0deg) translateX(0)}.tgbl-interface nav details.dropdown summary:not([role]){height:calc(1rem*var(--tgbl-line-height) + var(--tgbl-nav-link-spacing-vertical)*2);padding:calc(var(--tgbl-nav-link-spacing-vertical) - var(--tgbl-border-width)*2) var(--tgbl-nav-link-spacing-horizontal)}.tgbl-interface nav details.dropdown summary:not([role]):focus-visible{box-shadow:0 0 0 var(--tgbl-outline-width) var(--tgbl-primary-focus)}.tgbl-interface details.dropdown summary+ul{background-color:var(--tgbl-dropdown-background-color);border:var(--tgbl-border-width) solid var(--tgbl-dropdown-border-color);border-radius:var(--tgbl-border-radius);box-shadow:var(--tgbl-dropdown-box-shadow);color:var(--tgbl-dropdown-color);display:flex;flex-direction:column;left:0;margin:0;margin-top:var(--tgbl-outline-width);min-width:-moz-fit-content;min-width:fit-content;opacity:0;padding:0;position:absolute;transition:opacity var(--tgbl-transition),transform 0s ease-in-out 1s;white-space:nowrap;width:100%;z-index:99}.tgbl-interface details.dropdown summary+ul[dir=rtl]{left:auto;right:0}.tgbl-interface details.dropdown summary+ul li{list-style:none;margin-bottom:0;padding:calc(var(--tgbl-form-element-spacing-vertical)*.5) var(--tgbl-form-element-spacing-horizontal);width:100%}.tgbl-interface details.dropdown summary+ul li:first-of-type{margin-top:calc(var(--tgbl-form-element-spacing-vertical)*.5)}.tgbl-interface details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--tgbl-form-element-spacing-vertical)*.5)}.tgbl-interface details.dropdown summary+ul li a{border-radius:0;color:var(--tgbl-dropdown-color);display:block;margin:calc(var(--tgbl-form-element-spacing-vertical)*-.5) calc(var(--tgbl-form-element-spacing-horizontal)*-1);overflow:hidden;padding:calc(var(--tgbl-form-element-spacing-vertical)*.5) var(--tgbl-form-element-spacing-horizontal);text-decoration:none;text-overflow:ellipsis}.tgbl-interface details.dropdown summary+ul li a:active,.tgbl-interface details.dropdown summary+ul li a:focus,.tgbl-interface details.dropdown summary+ul li a:focus-visible,.tgbl-interface details.dropdown summary+ul li a:hover,.tgbl-interface details.dropdown summary+ul li a[aria-current]:not([aria-current=false]){background-color:var(--tgbl-dropdown-hover-background-color)}.tgbl-interface details.dropdown summary+ul li label{width:100%}.tgbl-interface details.dropdown summary+ul li:has(label):hover{background-color:var(--tgbl-dropdown-hover-background-color)}.tgbl-interface details.dropdown[open] summary{margin-bottom:0}.tgbl-interface details.dropdown[open] summary+ul{opacity:1;transform:scaleY(1);transition:opacity var(--tgbl-transition),transform 0s ease-in-out 0s}.tgbl-interface details.dropdown[open] summary:before{background:none;content:"";cursor:default;display:block;height:100vh;inset:0;position:fixed;width:100vw;z-index:1}.tgbl-interface label>details.dropdown{margin-top:calc(var(--tgbl-spacing)*.25)}.tgbl-interface [role=group],.tgbl-interface [role=search]{border-radius:var(--tgbl-border-radius);box-shadow:var(--tgbl-group-box-shadow,0 0 0 transparent);display:inline-flex;margin-bottom:var(--tgbl-spacing);position:relative;transition:box-shadow var(--tgbl-transition);vertical-align:middle;width:100%}.tgbl-interface [role=group] input:not([type=checkbox],[type=radio]),.tgbl-interface [role=group] select,.tgbl-interface [role=group]>*,.tgbl-interface [role=search] input:not([type=checkbox],[type=radio]),.tgbl-interface [role=search] select,.tgbl-interface [role=search]>*{flex:1 1 auto;margin-bottom:0;position:relative}.tgbl-interface [role=group] input:not([type=checkbox],[type=radio]):not(:first-child),.tgbl-interface [role=group] select:not(:first-child),.tgbl-interface [role=group]>:not(:first-child),.tgbl-interface [role=search] input:not([type=checkbox],[type=radio]):not(:first-child),.tgbl-interface [role=search] select:not(:first-child),.tgbl-interface [role=search]>:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:0}.tgbl-interface [role=group] input:not([type=checkbox],[type=radio]):not(:last-child),.tgbl-interface [role=group] select:not(:last-child),.tgbl-interface [role=group]>:not(:last-child),.tgbl-interface [role=search] input:not([type=checkbox],[type=radio]):not(:last-child),.tgbl-interface [role=search] select:not(:last-child),.tgbl-interface [role=search]>:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.tgbl-interface [role=group] input:not([type=checkbox],[type=radio]):focus,.tgbl-interface [role=group] select:focus,.tgbl-interface [role=group]>:focus,.tgbl-interface [role=search] input:not([type=checkbox],[type=radio]):focus,.tgbl-interface [role=search] select:focus,.tgbl-interface [role=search]>:focus{z-index:2}.tgbl-interface [role=group] [role=button]:not(:first-child),.tgbl-interface [role=group] [type=button]:not(:first-child),.tgbl-interface [role=group] [type=reset]:not(:first-child),.tgbl-interface [role=group] [type=submit]:not(:first-child),.tgbl-interface [role=group] button:not(:first-child),.tgbl-interface [role=group] input:not([type=checkbox],[type=radio]):not(:first-child),.tgbl-interface [role=group] select:not(:first-child),.tgbl-interface [role=search] [role=button]:not(:first-child),.tgbl-interface [role=search] [type=button]:not(:first-child),.tgbl-interface [role=search] [type=reset]:not(:first-child),.tgbl-interface [role=search] [type=submit]:not(:first-child),.tgbl-interface [role=search] button:not(:first-child),.tgbl-interface [role=search] input:not([type=checkbox],[type=radio]):not(:first-child),.tgbl-interface [role=search] select:not(:first-child){margin-left:calc(var(--tgbl-border-width)*-1)}.tgbl-interface [role=group] [role=button],.tgbl-interface [role=group] [type=button],.tgbl-interface [role=group] [type=reset],.tgbl-interface [role=group] [type=submit],.tgbl-interface [role=group] button,.tgbl-interface [role=search] [role=button],.tgbl-interface [role=search] [type=button],.tgbl-interface [role=search] [type=reset],.tgbl-interface [role=search] [type=submit],.tgbl-interface [role=search] button{width:auto}@supports selector(:has(*)){.tgbl-interface [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),.tgbl-interface [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus){--tgbl-group-box-shadow:var(--tgbl-group-box-shadow-focus-with-button)}.tgbl-interface [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]),.tgbl-interface [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select,.tgbl-interface [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]),.tgbl-interface [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select{border-color:transparent}.tgbl-interface [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),.tgbl-interface [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--tgbl-group-box-shadow:var(--tgbl-group-box-shadow-focus-with-input)}.tgbl-interface [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],.tgbl-interface [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],.tgbl-interface [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],.tgbl-interface [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,.tgbl-interface [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],.tgbl-interface [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],.tgbl-interface [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],.tgbl-interface [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) button{--tgbl-button-box-shadow:0 0 0 var(--tgbl-border-width) var(--tgbl-primary-border);--tgbl-button-hover-box-shadow:0 0 0 var(--tgbl-border-width) var(--tgbl-primary-hover-border)}.tgbl-interface [role=group] [role=button]:focus,.tgbl-interface [role=group] [type=button]:focus,.tgbl-interface [role=group] [type=reset]:focus,.tgbl-interface [role=group] [type=submit]:focus,.tgbl-interface [role=group] button:focus,.tgbl-interface [role=search] [role=button]:focus,.tgbl-interface [role=search] [type=button]:focus,.tgbl-interface [role=search] [type=reset]:focus,.tgbl-interface [role=search] [type=submit]:focus,.tgbl-interface [role=search] button:focus{box-shadow:none}}.tgbl-interface [role=search]>:first-child{border-bottom-left-radius:5rem;border-top-left-radius:5rem}.tgbl-interface [role=search]>:last-child{border-bottom-right-radius:5rem;border-top-right-radius:5rem}.tgbl-interface [aria-busy=true]:not(input,select,textarea,html){white-space:nowrap}.tgbl-interface [aria-busy=true]:not(input,select,textarea,html):before{background-image:var(--tgbl-icon-loading);background-repeat:no-repeat;background-size:1em auto;content:"";display:inline-block;height:1em;vertical-align:-.125em;width:1em}.tgbl-interface [aria-busy=true]:not(input,select,textarea,html):not(:empty):before{margin-inline-end:calc(var(--tgbl-spacing)*.5)}.tgbl-interface [aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}.tgbl-interface [role=button][aria-busy=true],.tgbl-interface [type=button][aria-busy=true],.tgbl-interface [type=reset][aria-busy=true],.tgbl-interface [type=submit][aria-busy=true],.tgbl-interface a[aria-busy=true],.tgbl-interface button[aria-busy=true]{pointer-events:none}:root{--tgbl-scrollbar-width:0px}.tgbl-interface dialog{align-items:center;-webkit-backdrop-filter:var(--tgbl-modal-overlay-backdrop-filter);backdrop-filter:var(--tgbl-modal-overlay-backdrop-filter);background-color:var(--tgbl-modal-overlay-background-color);border:0;bottom:0;color:var(--tgbl-color);display:flex;height:inherit;justify-content:center;left:0;min-height:100%;min-width:100%;padding:0;position:fixed;right:0;top:0;width:inherit;z-index:999}.tgbl-interface dialog article{margin:var(--tgbl-spacing);max-height:calc(100vh - var(--tgbl-spacing)*2);overflow:auto;width:100%}@media (min-width:576px){.tgbl-interface dialog article{max-width:510px}}@media (min-width:768px){.tgbl-interface dialog article{max-width:700px}}.tgbl-interface dialog article>header>*{margin-bottom:0}.tgbl-interface dialog article>header .close,.tgbl-interface dialog article>header :is(a,button)[rel=prev]{float:right;margin:0;margin-left:var(--tgbl-spacing);padding:0}.tgbl-interface dialog article>footer{text-align:right}.tgbl-interface dialog article>footer [role=button],.tgbl-interface dialog article>footer button{margin-bottom:0}.tgbl-interface dialog article>footer [role=button]:not(:first-of-type),.tgbl-interface dialog article>footer button:not(:first-of-type){margin-left:calc(var(--tgbl-spacing)*.5)}.tgbl-interface dialog article .close,.tgbl-interface dialog article :is(a,button)[rel=prev]{background-color:transparent;background-image:var(--tgbl-icon-close);background-position:50%;background-repeat:no-repeat;background-size:auto 1rem;border:none;display:block;height:1rem;margin-bottom:var(--tgbl-spacing);margin-left:auto;margin-top:calc(var(--tgbl-spacing)*-1);opacity:.5;transition:opacity var(--tgbl-transition);width:1rem}.tgbl-interface dialog article .close:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.tgbl-interface dialog article :is(a,button)[rel=prev]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){opacity:1}.tgbl-interface dialog:not([open]),.tgbl-interface dialog[open=false]{display:none}.modal-is-open{overflow:hidden;padding-right:var(--tgbl-scrollbar-width,0);pointer-events:none;touch-action:none}.modal-is-open dialog{pointer-events:auto;touch-action:auto}:where(.modal-is-opening,.modal-is-closing) dialog,:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-duration:.2s;animation-fill-mode:both;animation-timing-function:ease-in-out}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.2s;animation-name:modal}.modal-is-closing dialog,.modal-is-closing dialog>article{animation-delay:0s;animation-direction:reverse}@keyframes modal-overlay{0%{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent}}@keyframes modal{0%{opacity:0;transform:translateY(-100%)}}:where(nav li):before{content:"​";float:left}.tgbl-interface nav,.tgbl-interface nav ul{display:flex}.tgbl-interface nav{justify-content:space-between;overflow:visible}.tgbl-interface nav ol,.tgbl-interface nav ul{align-items:center;list-style:none;margin-bottom:0;padding:0}.tgbl-interface nav ol:first-of-type,.tgbl-interface nav ul:first-of-type{margin-left:calc(var(--tgbl-nav-element-spacing-horizontal)*-1)}.tgbl-interface nav ol:last-of-type,.tgbl-interface nav ul:last-of-type{margin-right:calc(var(--tgbl-nav-element-spacing-horizontal)*-1)}.tgbl-interface nav li{display:inline-block;margin:0;padding:var(--tgbl-nav-element-spacing-vertical) var(--tgbl-nav-element-spacing-horizontal)}.tgbl-interface nav li :where(a,[role=link]){border-radius:var(--tgbl-border-radius);display:inline-block;margin:calc(var(--tgbl-nav-link-spacing-vertical)*-1) calc(var(--tgbl-nav-link-spacing-horizontal)*-1);padding:var(--tgbl-nav-link-spacing-vertical) var(--tgbl-nav-link-spacing-horizontal)}.tgbl-interface nav li :where(a,[role=link]):not(:hover){text-decoration:none}.tgbl-interface nav li [role=button],.tgbl-interface nav li [type=button],.tgbl-interface nav li button,.tgbl-interface nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]),.tgbl-interface nav li select{height:auto;margin-bottom:0;margin-left:inherit;margin-right:inherit;padding:calc(var(--tgbl-nav-link-spacing-vertical) - var(--tgbl-border-width)*2) var(--tgbl-nav-link-spacing-horizontal)}.tgbl-interface nav[aria-label=breadcrumb]{align-items:center;justify-content:start}.tgbl-interface nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--tgbl-nav-link-spacing-horizontal)}.tgbl-interface nav[aria-label=breadcrumb] ul li a{margin:calc(var(--tgbl-nav-link-spacing-vertical)*-1) 0;margin-inline-start:calc(var(--tgbl-nav-link-spacing-horizontal)*-1)}.tgbl-interface nav[aria-label=breadcrumb] ul li:not(:last-child):after{color:var(--tgbl-muted-color);content:var(--tgbl-nav-breadcrumb-divider);display:inline-block;margin:0 calc(var(--tgbl-nav-link-spacing-horizontal)*-1);position:absolute;text-align:center;text-decoration:none;white-space:nowrap;width:calc(var(--tgbl-nav-link-spacing-horizontal)*4)}.tgbl-interface nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;pointer-events:none;text-decoration:none}.tgbl-interface aside li,.tgbl-interface aside nav,.tgbl-interface aside ol,.tgbl-interface aside ul{display:block}.tgbl-interface aside li{padding:calc(var(--tgbl-nav-element-spacing-vertical)*.5) var(--tgbl-nav-element-spacing-horizontal)}.tgbl-interface aside li a{display:block}.tgbl-interface aside li [role=button]{margin:inherit}[dir=rtl] .tgbl-interface nav[aria-label=breadcrumb] ul li:not(:last-child) :after{content:"\\"}.tgbl-interface progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--tgbl-progress-background-color);border:0;border-radius:var(--tgbl-border-radius);color:var(--tgbl-progress-color);display:inline-block;height:.5rem;margin-bottom:calc(var(--tgbl-spacing)*.5);overflow:hidden;vertical-align:baseline;width:100%}.tgbl-interface progress::-webkit-progress-bar{background:none;border-radius:var(--tgbl-border-radius)}.tgbl-interface progress[value]::-webkit-progress-value{background-color:var(--tgbl-progress-color);-webkit-transition:inline-size var(--tgbl-transition);transition:inline-size var(--tgbl-transition)}.tgbl-interface progress::-moz-progress-bar{background-color:var(--tgbl-progress-color)}@media (prefers-reduced-motion:no-preference){.tgbl-interface progress:indeterminate{animation:progress-indeterminate 1s linear infinite;background:var(--tgbl-progress-background-color) linear-gradient(to right,var(--tgbl-progress-color) 30%,var(--tgbl-progress-background-color) 30%) top left/150% 150% no-repeat}.tgbl-interface progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}.tgbl-interface progress:indeterminate::-moz-progress-bar{background-color:transparent}}@media (prefers-reduced-motion:no-preference){[dir=rtl] .tgbl-interface progress:indeterminate{animation-direction:reverse}}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}.tgbl-interface [data-tooltip]{position:relative}.tgbl-interface [data-tooltip]:not(a,button,input){border-bottom:1px dotted;cursor:help;text-decoration:none}.tgbl-interface [data-tooltip]:after,.tgbl-interface [data-tooltip]:before,.tgbl-interface [data-tooltip][data-placement=top]:after,.tgbl-interface [data-tooltip][data-placement=top]:before{background:var(--tgbl-tooltip-background-color);border-radius:var(--tgbl-border-radius);bottom:100%;color:var(--tgbl-tooltip-color);content:attr(data-tooltip);display:block;font-size:.875rem;font-style:normal;font-weight:var(--tgbl-font-weight);left:50%;opacity:0;overflow:hidden;padding:.25rem .5rem;pointer-events:none;position:absolute;text-decoration:none;text-overflow:ellipsis;transform:translate(-50%,-.25rem);white-space:nowrap;z-index:99}.tgbl-interface [data-tooltip]:after,.tgbl-interface [data-tooltip][data-placement=top]:after{background-color:transparent;border-left:.3rem solid transparent;border-radius:0;border-right:.3rem solid transparent;border-top:.3rem solid;color:var(--tgbl-tooltip-background-color);content:"";padding:0;transform:translate(-50%)}.tgbl-interface [data-tooltip][data-placement=bottom]:after,.tgbl-interface [data-tooltip][data-placement=bottom]:before{bottom:auto;top:100%;transform:translate(-50%,.25rem)}.tgbl-interface [data-tooltip][data-placement=bottom]:after{border:.3rem solid transparent;border-bottom-color:currentcolor;transform:translate(-50%,-.3rem)}.tgbl-interface [data-tooltip][data-placement=left]:after,.tgbl-interface [data-tooltip][data-placement=left]:before{bottom:auto;left:auto;right:100%;top:50%;transform:translate(-.25rem,-50%)}.tgbl-interface [data-tooltip][data-placement=left]:after{border:.3rem solid transparent;border-left-color:currentcolor;transform:translate(.3rem,-50%)}.tgbl-interface [data-tooltip][data-placement=right]:after,.tgbl-interface [data-tooltip][data-placement=right]:before{bottom:auto;left:100%;right:auto;top:50%;transform:translate(.25rem,-50%)}.tgbl-interface [data-tooltip][data-placement=right]:after{border:.3rem solid transparent;border-right-color:currentcolor;transform:translate(-.3rem,-50%)}.tgbl-interface [data-tooltip]:focus:after,.tgbl-interface [data-tooltip]:focus:before,.tgbl-interface [data-tooltip]:hover:after,.tgbl-interface [data-tooltip]:hover:before{opacity:1}@media (hover:hover) and (pointer:fine){.tgbl-interface [data-tooltip]:focus:after,.tgbl-interface [data-tooltip]:focus:before,.tgbl-interface [data-tooltip]:hover:after,.tgbl-interface [data-tooltip]:hover:before{--tgbl-tooltip-slide-to:translate(-50%,-0.25rem);animation-duration:.2s;animation-fill-mode:forwards;animation-name:tooltip-slide;opacity:0;transform:translate(-50%,.75rem)}.tgbl-interface [data-tooltip]:focus:after,.tgbl-interface [data-tooltip]:hover:after{--tgbl-tooltip-caret-slide-to:translate(-50%,0rem);animation-name:tooltip-caret-slide;transform:translate(-50%,-.25rem)}.tgbl-interface [data-tooltip][data-placement=bottom]:focus:after,.tgbl-interface [data-tooltip][data-placement=bottom]:focus:before,.tgbl-interface [data-tooltip][data-placement=bottom]:hover:after,.tgbl-interface [data-tooltip][data-placement=bottom]:hover:before{--tgbl-tooltip-slide-to:translate(-50%,0.25rem);animation-name:tooltip-slide;transform:translate(-50%,-.75rem)}.tgbl-interface [data-tooltip][data-placement=bottom]:focus:after,.tgbl-interface [data-tooltip][data-placement=bottom]:hover:after{--tgbl-tooltip-caret-slide-to:translate(-50%,-0.3rem);animation-name:tooltip-caret-slide;transform:translate(-50%,-.5rem)}.tgbl-interface [data-tooltip][data-placement=left]:focus:after,.tgbl-interface [data-tooltip][data-placement=left]:focus:before,.tgbl-interface [data-tooltip][data-placement=left]:hover:after,.tgbl-interface [data-tooltip][data-placement=left]:hover:before{--tgbl-tooltip-slide-to:translate(-0.25rem,-50%);animation-name:tooltip-slide;transform:translate(.75rem,-50%)}.tgbl-interface [data-tooltip][data-placement=left]:focus:after,.tgbl-interface [data-tooltip][data-placement=left]:hover:after{--tgbl-tooltip-caret-slide-to:translate(0.3rem,-50%);animation-name:tooltip-caret-slide;transform:translate(.05rem,-50%)}.tgbl-interface [data-tooltip][data-placement=right]:focus:after,.tgbl-interface [data-tooltip][data-placement=right]:focus:before,.tgbl-interface [data-tooltip][data-placement=right]:hover:after,.tgbl-interface [data-tooltip][data-placement=right]:hover:before{--tgbl-tooltip-slide-to:translate(0.25rem,-50%);animation-name:tooltip-slide;transform:translate(-.75rem,-50%)}.tgbl-interface [data-tooltip][data-placement=right]:focus:after,.tgbl-interface [data-tooltip][data-placement=right]:hover:after{--tgbl-tooltip-caret-slide-to:translate(-0.3rem,-50%);animation-name:tooltip-caret-slide;transform:translate(-.05rem,-50%)}}@keyframes tooltip-slide{to{opacity:1;transform:var(--tgbl-tooltip-slide-to)}}@keyframes tooltip-caret-slide{50%{opacity:0}to{opacity:1;transform:var(--tgbl-tooltip-caret-slide-to)}}.tgbl-interface [aria-controls]{cursor:pointer}.tgbl-interface [aria-disabled=true],.tgbl-interface [disabled]{cursor:not-allowed}.tgbl-interface [aria-hidden=false][hidden]{display:initial}.tgbl-interface [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}.tgbl-interface [tabindex],.tgbl-interface a,.tgbl-interface area,.tgbl-interface button,.tgbl-interface input,.tgbl-interface label,.tgbl-interface select,.tgbl-interface summary,.tgbl-interface textarea{-ms-touch-action:manipulation}.tgbl-interface [dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){.tgbl-interface :not([aria-busy=true]),.tgbl-interface :not([aria-busy=true]):after,.tgbl-interface :not([aria-busy=true]):before{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}
 /*# sourceMappingURL=design.min.css.map */
\ No newline at end of file
diff --git a/build/design.min.css.map b/build/design.min.css.map
deleted file mode 100644
index 24eef92..0000000
--- a/build/design.min.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["../src/reset.scss","../src/index.scss","../src/component-input.scss","../src/colors.scss","../src/component-button.scss"],"names":[],"mappings":"AAEA;EAEA;;GAAA;EAUA;;;;;;;GAAA;EASA,gBAAA,EAAA,MAAA;EACA,8BAAA,EAAA,MAAA;EACA,gBAAA,EAAA,MAAA;EACA,cAAA;KAAA,WAAA,EAAA,MAAA;EACA,4NAAA,EAAA,MAAA;EACA,6BAAA,EAAA,MAAA;EACA,+BAAA,EAAA,MAAA;EAEA;;;GAAA;EAKA,SAAA,EAAA,MAAA;EACA,oBAAA,EAAA,MAAA;EAEA;;;;GAAA;EAYA;;GAAA;EAQA;;GAAA;EAcA;;GAAA;EASA;;GAAA;EASA;;;GAAA;EAaA;;GAAA;EAQA;;GAAA;EAoBA;;;;GAAA;EAYA;;;;GAAA;EAsBA;;GAAA;EASA;;;;GAAA;EAgBA;;GAAA;EAQA;;GAAA;EAQA;;GAAA;EAQA;;GAAA;EASA;;;GAAA;EAUA;;GAAA;EAQA;;;GAAA;EAUA;;GAAA;EAQA;;GAAA;EAyCA;;GAAA;EAQA;;GAAA;EAUA;;GAAA;EAOA;;;;GAAA;EAkBA;;GAAA;EAUA,wEAAA;AC7OA;AD7GA;;;EAGE,sBAAA;AC+GF;AD7EA;EACE,SAAA,EAAA,MAAA;EACA,cAAA,EAAA,MAAA;EACA,qBAAA,EAAA,MAAA;AC+EF;ADxEA;EACE,yCAAA;UAAA,iCAAA;AC0EF;ADnEA;;;;;;EAME,kBAAA;EACA,oBAAA;ACqEF;AD9DA;EACE,cAAA;EACA,wBAAA;ACgEF;ADzDA;;EAEE,mBAAA;AC2DF;ADnDA;;;;EAIE,+GAAA,EAAA,MAAA;EACA,kBAAA,EAAA,MAAA;ACqDF;AD9CA;EACE,cAAA;ACgDF;ADzCA;;EAEE,cAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;AC2CF;ADxCA;EACE,eAAA;AC0CF;ADvCA;EACE,WAAA;ACyCF;ADhCA;EACE,cAAA,EAAA,MAAA;EACA,qBAAA,EAAA,MAAA;EACA,yBAAA,EAAA,MAAA;ACkCF;ADzBA;;;;;EAKE,oBAAA,EAAA,MAAA;EACA,8BAAA,EAAA,MAAA;EACA,gCAAA,EAAA,MAAA;EACA,eAAA,EAAA,MAAA;EACA,oBAAA,EAAA,MAAA;EACA,oBAAA,EAAA,MAAA;EACA,cAAA,EAAA,MAAA;EACA,SAAA,EAAA,MAAA;EACA,UAAA,EAAA,MAAA;AC2BF;ADpBA;;EAEE,oBAAA;ACsBF;ADbA;;;;EAIE,0BAAA,EAAA,MAAA;EACA,6BAAA,EAAA,MAAA;EACA,sBAAA,EAAA,MAAA;EACA,eAAA,EAAA,MAAA;ACeF;ADRA;EACE,aAAA;ACUF;ADHA;EACE,gBAAA;ACKF;ADEA;EACE,wBAAA;ACAF;ADOA;;EAEE,YAAA;ACLF;ADaA;EACE,6BAAA,EAAA,MAAA;EACA,oBAAA,EAAA,MAAA;ACXF;ADkBA;EACE,wBAAA;AChBF;ADwBA;EACE,0BAAA,EAAA,MAAA;EACA,aAAA,EAAA,MAAA;ACtBF;AD6BA;EACE,kBAAA;AC3BF;ADkCA;;;;;;;;;;;;;EAaE,SAAA;AChCF;ADmCA;EACE,SAAA;EACA,UAAA;ACjCF;ADoCA;EACE,UAAA;AClCF;ADqCA;;;EAGE,gBAAA;EACA,SAAA;EACA,UAAA;ACnCF;ADsCA;EACE,UAAA;ACpCF;AD2CA;EACE,gBAAA;ACzCF;ADgDA;EAEE,UAAA;AC9CF;AD4CA;;EAEE,UAAA;AC9CF;ADqDA;EACE,eAAA;ACnDF;AD4DA;;;;;;;;EAQE,cAAA,EAAA,MAAA;EACA,sBAAA,EAAA,MAAA;AC1DF;ADiEA;;EAEE,eAAA;EACA,YAAA;AC/DF;ADmEA;EACE,aAAA;ACjEF;AC1NA;EACE,cAAA;EACA,eAhE0B;EAiE1B,gBAhEwB;EAiExB,cCIS;EDHT,yBAhEsB;AD4RxB;ACzNA;EACE,qBAAA;EACA,kBAAA;AD2NF;ACxNA;;;;;;;;;;;;;EAaE,wBA/EuB;ADySzB;ACvNA;;;;;;;;;;;;;;;EAeE,uBAAA;EACA,eA/F0B;EAgG1B,6BAnGuB;EAoGvB,oBAAA;EACA,oBAvG+B;EAwG/B,kBAvG8B;EAwG9B,uBAhG6B;EAiG7B,6BAAA;EACA,iCAAA;EACA,2BAAA;EACA,kCAAA;EACA,qBAAA;EACA,kBAzG8B;EA0G9B,+CAAA;EACA,cA9G0B;EA+G1B,wBA9GsB;EA+GtB,4BA/GsB;EAgHtB,4BAlHuB;EAmHvB,0DApG0B;EAqG1B,yBAnG0B;EAoG1B,uCArGiC;AD8TnC;ACvNE;EACE,qCAAA;ADuOJ;ACxOE;;;;;;;;;;;;;;;EACE,qCAAA;ADuOJ;ACrOE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EACE,6BAAA;EACA,iCAAA;EACA,2BAAA;EACA,kCAAA;EACA,yBAAA;EACA,mCAAA;EACA,mBAAA;ADmQJ;ACjQE;;;;;;;;;;;;;;;EACE,6BAAA;EACA,iCAAA;EACA,2BAAA;EACA,kCAAA;ADiRJ;AC/QE;;;;;;;;;;;;;;;EACE,6BAAA;EACA,iCAAA;EACA,2BAAA;EACA,kCAAA;AD+RJ;AC5RA;EACE,wBAAA;EACA,sNAAA;EACA,4BAAA;EACA,uCAAA;EACA,qBAAA;EACA,0BAAA;EACA,+BAAA;EACA,8BAAA;EACA,kCAAA;AD8RF;AC5RA;EACE,8BAAA;EACA,6BAAA;EACA,iCAAA;EACA,2BAAA;EACA,kCAAA;EACA,6CAAA;EACA,mCAAA;EACA,mBAAA;AD8RF;AC3RA;;EAEE,6BAAA;EACA,iCAAA;EACA,2BAAA;EACA,kCAAA;EACA,qBAAA;EACA,0BAAA;EACA,+CAAA;EACA,6BAAA;EACA,oBAAA;EACA,cAAA;EACA,kBAAA;EACA,sBAAA;EACA,WA1K4B;EA2K5B,YA3K4B;EA4K5B,eA5K4B;EA6K5B,wBAAA;EACA,kEAAA;AD6RF;AC3RE;;EACE,yBC1LO;ED2LP,qBC3LO;ED4LP,cC/MI;AF6eR;AC5RE;;EACE,YAAA;AD+RJ;AC5RA;EACE,kBAhM8B;AD8dhC;AC7RE;EACE,+LAAA;EACA,YAAA;EACA,mCAAA;EACA,kCAAA;EACA,aAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;AD+RJ;AC5RA;EACE,mBAAA;AD8RF;AC5RE;EACE,WAAA;EACA,8BAAA;EACA,sBAAA;EACA,aAAA;EACA,cAAA;AD8RJ;AG7dA;;;;;;EAME,yDAAA;EACA,uEAAA;EACA,uEAAA;EACA,2EAAA;EACA,8CAAA;EACA,4DAAA;EACA,4DAAA;EACA,gEAAA;EACA,iDAAA;EACA,+DAAA;EACA,+DAAA;EACA,sEAAA;EACA,mEAAA;EAEA,eAAA;EACA,sDAAA;EACA,qCAAA;EACA,iBApE8B;EAqE9B,mBApE8B;EAqE9B,8CAAA;EACA,kBAhE+B;EAiE/B,kBAAA;EACA,eAnE2B;EAoE3B,gBAlE6B;EAmE7B,iBAAA;EACA,oBAAA;EACA,WAAA;EACA,mBAAA;EACA,uBAAA;EACA,oBA9EgC;EA+EhC,kBA9E+B;EA+E/B,2BA9E2B;EA8E3B,sBA9E2B;EA+E3B,WA9EuB;EA+EvB,0DAxE2B;EAyE3B,yBAvE2B;EAwE3B,uCAzEkC;AHuiBpC;AG5dE;;;;;;EACE,8DAAA;EACA,6CAAA;EACA,sDAAA;AHmeJ;AGjeE;;;;;;EACE,8DAAA;EACA,6CAAA;EACA,sDAAA;EACA,oFAAA;EACA,mCAAA;EACA,mBAAA;AHweJ;AGteE;;;;;;;;;;;EACE,+DAAA;EACA,8CAAA;EACA,uDAAA;EACA,mBAAA;AHkfJ","file":"design.min.css","sourcesContent":["// Reset styles based on https://raw.githubusercontent.com/tailwindlabs/tailwindcss/master/src/css/preflight.css\r\n\r\n.#{$prefix}reset {\r\n\r\n/*\r\nPrevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\r\n*/\r\n\r\n*,\r\n::before,\r\n::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/*\r\n1. Use a consistent sensible line-height in all browsers.\r\n2. Prevent adjustments of font size after orientation changes in iOS.\r\n3. Use a more readable tab size.\r\n4. Use the user's configured `sans` font-family by default.\r\n5. Use the user's configured `sans` font-feature-settings by default.\r\n6. Use the user's configured `sans` font-variation-settings by default.\r\n*/\r\n\r\nline-height: 1.5; /* 1 */\r\n-webkit-text-size-adjust: 100%; /* 2 */\r\n-moz-tab-size: 4; /* 3 */\r\ntab-size: 4; /* 3 */\r\nfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\r\nfont-feature-settings: normal; /* 5 */\r\nfont-variation-settings: normal; /* 6 */\r\n\r\n/*\r\n1. Remove the margin in all browsers.\r\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\r\n*/\r\n\r\nmargin: 0; /* 1 */\r\nline-height: inherit; /* 2 */\r\n\r\n/*\r\n1. Add the correct height in Firefox.\r\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\r\n3. Ensure horizontal rules are visible by default.\r\n*/\r\n\r\nhr {\r\n  height: 0; /* 1 */\r\n  color: inherit; /* 2 */\r\n  border-top-width: 1px; /* 3 */\r\n}\r\n\r\n/*\r\nAdd the correct text decoration in Chrome, Edge, and Safari.\r\n*/\r\n\r\nabbr:where([title]) {\r\n  text-decoration: underline dotted;\r\n}\r\n\r\n/*\r\nRemove the default font size and weight for headings.\r\n*/\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  font-size: inherit;\r\n  font-weight: inherit;\r\n}\r\n\r\n/*\r\nReset links to optimize for opt-in styling instead of opt-out.\r\n*/\r\n\r\na {\r\n  color: inherit;\r\n  text-decoration: inherit;\r\n}\r\n\r\n/*\r\nAdd the correct font weight in Edge and Safari.\r\n*/\r\n\r\nb,\r\nstrong {\r\n  font-weight: bolder;\r\n}\r\n\r\n/*\r\n1. Use the user's configured `mono` font family by default.\r\n2. Correct the odd `em` font sizing in all browsers.\r\n*/\r\n\r\ncode,\r\nkbd,\r\nsamp,\r\npre {\r\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\r\n  font-size: inherit; /* 2 */\r\n}\r\n\r\n/*\r\nAdd the correct font size in all browsers.\r\n*/\r\n\r\nsmall {\r\n  font-size: 80%;\r\n}\r\n\r\n/*\r\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\r\n*/\r\n\r\nsub,\r\nsup {\r\n  font-size: 75%;\r\n  line-height: 0;\r\n  position: relative;\r\n  vertical-align: baseline;\r\n}\r\n\r\nsub {\r\n  bottom: -0.25em;\r\n}\r\n\r\nsup {\r\n  top: -0.5em;\r\n}\r\n\r\n/*\r\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\r\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\r\n3. Remove gaps between table borders by default.\r\n*/\r\n\r\ntable {\r\n  text-indent: 0; /* 1 */\r\n  border-color: inherit; /* 2 */\r\n  border-collapse: collapse; /* 3 */\r\n}\r\n\r\n/*\r\n1. Change the font styles in all browsers.\r\n2. Remove the margin in Firefox and Safari.\r\n3. Remove default padding in all browsers.\r\n*/\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n  font-family: inherit; /* 1 */\r\n  font-feature-settings: inherit; /* 1 */\r\n  font-variation-settings: inherit; /* 1 */\r\n  font-size: 100%; /* 1 */\r\n  font-weight: inherit; /* 1 */\r\n  line-height: inherit; /* 1 */\r\n  color: inherit; /* 1 */\r\n  margin: 0; /* 2 */\r\n  padding: 0; /* 3 */\r\n}\r\n\r\n/*\r\nRemove the inheritance of text transform in Edge and Firefox.\r\n*/\r\n\r\nbutton,\r\nselect {\r\n  text-transform: none;\r\n}\r\n\r\n/*\r\n1. Correct the inability to style clickable types in iOS and Safari.\r\n2. Remove default button styles.\r\n3. Set the cursor to pointer for buttons.\r\n*/\r\n\r\nbutton,\r\n[type='button'],\r\n[type='reset'],\r\n[type='submit'] {\r\n  -webkit-appearance: button; /* 1 */\r\n  background-color: transparent; /* 2 */\r\n  background-image: none; /* 2 */\r\n  cursor: pointer; /* 3 */\r\n}\r\n\r\n/*\r\nUse the modern Firefox focus style for all focusable elements.\r\n*/\r\n\r\n:-moz-focusring {\r\n  outline: auto;\r\n}\r\n\r\n/*\r\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\r\n*/\r\n\r\n:-moz-ui-invalid {\r\n  box-shadow: none;\r\n}\r\n\r\n/*\r\nAdd the correct vertical alignment in Chrome and Firefox.\r\n*/\r\n\r\nprogress {\r\n  vertical-align: baseline;\r\n}\r\n\r\n/*\r\nCorrect the cursor style of increment and decrement buttons in Safari.\r\n*/\r\n\r\n::-webkit-inner-spin-button,\r\n::-webkit-outer-spin-button {\r\n  height: auto;\r\n}\r\n\r\n/*\r\n1. Correct the odd appearance in Chrome and Safari.\r\n2. Correct the outline style in Safari.\r\n*/\r\n\r\n[type='search'] {\r\n  -webkit-appearance: textfield; /* 1 */\r\n  outline-offset: -2px; /* 2 */\r\n}\r\n\r\n/*\r\nRemove the inner padding in Chrome and Safari on macOS.\r\n*/\r\n\r\n::-webkit-search-decoration {\r\n  -webkit-appearance: none;\r\n}\r\n\r\n/*\r\n1. Correct the inability to style clickable types in iOS and Safari.\r\n2. Change font properties to `inherit` in Safari.\r\n*/\r\n\r\n::-webkit-file-upload-button {\r\n  -webkit-appearance: button; /* 1 */\r\n  font: inherit; /* 2 */\r\n}\r\n\r\n/*\r\nAdd the correct display in Chrome and Safari.\r\n*/\r\n\r\nsummary {\r\n  display: list-item;\r\n}\r\n\r\n/*\r\nRemoves the default spacing for appropriate elements.\r\n*/\r\n\r\nblockquote,\r\ndl,\r\ndd,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\nhr,\r\nfigure,\r\np,\r\npre {\r\n  margin: 0;\r\n}\r\n\r\nfieldset {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nlegend {\r\n  padding: 0;\r\n}\r\n\r\nol,\r\nul,\r\nmenu {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\ndialog {\r\n  padding: 0;\r\n}\r\n\r\n/*\r\nPrevent resizing textareas horizontally by default.\r\n*/\r\n\r\ntextarea {\r\n  resize: vertical;\r\n}\r\n\r\n/*\r\nReset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\r\n*/\r\n\r\ninput::placeholder,\r\ntextarea::placeholder {\r\n  opacity: 1;\r\n}\r\n\r\n\r\n/*\r\nMake sure disabled buttons don't get the pointer cursor.\r\n*/\r\n:disabled {\r\n  cursor: default;\r\n}\r\n\r\n/*\r\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\r\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\r\n   This can trigger a poorly considered lint error in some tools but is included by design.\r\n*/\r\n\r\nimg,\r\nsvg,\r\nvideo,\r\ncanvas,\r\naudio,\r\niframe,\r\nembed,\r\nobject {\r\n  display: block; /* 1 */\r\n  vertical-align: middle; /* 2 */\r\n}\r\n\r\n/*\r\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\r\n*/\r\n\r\nimg,\r\nvideo {\r\n  max-width: 100%;\r\n  height: auto;\r\n}\r\n\r\n/* Make elements with the HTML hidden attribute stay hidden by default */\r\n[hidden] {\r\n  display: none;\r\n}\r\n  \r\n}\r\n",".tgbl-interface .tgbl-reset {\n  /*\n  Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n  */\n  /*\n  1. Use a consistent sensible line-height in all browsers.\n  2. Prevent adjustments of font size after orientation changes in iOS.\n  3. Use a more readable tab size.\n  4. Use the user's configured `sans` font-family by default.\n  5. Use the user's configured `sans` font-feature-settings by default.\n  6. Use the user's configured `sans` font-variation-settings by default.\n  */\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  /*\n  1. Remove the margin in all browsers.\n  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n  */\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n  /*\n  1. Add the correct height in Firefox.\n  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n  3. Ensure horizontal rules are visible by default.\n  */\n  /*\n  Add the correct text decoration in Chrome, Edge, and Safari.\n  */\n  /*\n  Remove the default font size and weight for headings.\n  */\n  /*\n  Reset links to optimize for opt-in styling instead of opt-out.\n  */\n  /*\n  Add the correct font weight in Edge and Safari.\n  */\n  /*\n  1. Use the user's configured `mono` font family by default.\n  2. Correct the odd `em` font sizing in all browsers.\n  */\n  /*\n  Add the correct font size in all browsers.\n  */\n  /*\n  Prevent `sub` and `sup` elements from affecting the line height in all browsers.\n  */\n  /*\n  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n  3. Remove gaps between table borders by default.\n  */\n  /*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\n  /*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\n  /*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  3. Set the cursor to pointer for buttons.\n  */\n  /*\n  Use the modern Firefox focus style for all focusable elements.\n  */\n  /*\n  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n  */\n  /*\n  Add the correct vertical alignment in Chrome and Firefox.\n  */\n  /*\n  Correct the cursor style of increment and decrement buttons in Safari.\n  */\n  /*\n  1. Correct the odd appearance in Chrome and Safari.\n  2. Correct the outline style in Safari.\n  */\n  /*\n  Remove the inner padding in Chrome and Safari on macOS.\n  */\n  /*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Change font properties to `inherit` in Safari.\n  */\n  /*\n  Add the correct display in Chrome and Safari.\n  */\n  /*\n  Removes the default spacing for appropriate elements.\n  */\n  /*\n  Prevent resizing textareas horizontally by default.\n  */\n  /*\n  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n  */\n  /*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n  /*\n  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n     This can trigger a poorly considered lint error in some tools but is included by design.\n  */\n  /*\n  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n  */\n  /* Make elements with the HTML hidden attribute stay hidden by default */\n}\n.tgbl-interface .tgbl-reset *,\n.tgbl-interface .tgbl-reset ::before,\n.tgbl-interface .tgbl-reset ::after {\n  box-sizing: border-box;\n}\n.tgbl-interface .tgbl-reset hr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n.tgbl-interface .tgbl-reset abbr:where([title]) {\n  text-decoration: underline dotted;\n}\n.tgbl-interface .tgbl-reset h1,\n.tgbl-interface .tgbl-reset h2,\n.tgbl-interface .tgbl-reset h3,\n.tgbl-interface .tgbl-reset h4,\n.tgbl-interface .tgbl-reset h5,\n.tgbl-interface .tgbl-reset h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n.tgbl-interface .tgbl-reset a {\n  color: inherit;\n  text-decoration: inherit;\n}\n.tgbl-interface .tgbl-reset b,\n.tgbl-interface .tgbl-reset strong {\n  font-weight: bolder;\n}\n.tgbl-interface .tgbl-reset code,\n.tgbl-interface .tgbl-reset kbd,\n.tgbl-interface .tgbl-reset samp,\n.tgbl-interface .tgbl-reset pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: inherit; /* 2 */\n}\n.tgbl-interface .tgbl-reset small {\n  font-size: 80%;\n}\n.tgbl-interface .tgbl-reset sub,\n.tgbl-interface .tgbl-reset sup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.tgbl-interface .tgbl-reset sub {\n  bottom: -0.25em;\n}\n.tgbl-interface .tgbl-reset sup {\n  top: -0.5em;\n}\n.tgbl-interface .tgbl-reset table {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n.tgbl-interface .tgbl-reset button,\n.tgbl-interface .tgbl-reset input,\n.tgbl-interface .tgbl-reset optgroup,\n.tgbl-interface .tgbl-reset select,\n.tgbl-interface .tgbl-reset textarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n.tgbl-interface .tgbl-reset button,\n.tgbl-interface .tgbl-reset select {\n  text-transform: none;\n}\n.tgbl-interface .tgbl-reset button,\n.tgbl-interface .tgbl-reset [type=button],\n.tgbl-interface .tgbl-reset [type=reset],\n.tgbl-interface .tgbl-reset [type=submit] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n  cursor: pointer; /* 3 */\n}\n.tgbl-interface .tgbl-reset :-moz-focusring {\n  outline: auto;\n}\n.tgbl-interface .tgbl-reset :-moz-ui-invalid {\n  box-shadow: none;\n}\n.tgbl-interface .tgbl-reset progress {\n  vertical-align: baseline;\n}\n.tgbl-interface .tgbl-reset ::-webkit-inner-spin-button,\n.tgbl-interface .tgbl-reset ::-webkit-outer-spin-button {\n  height: auto;\n}\n.tgbl-interface .tgbl-reset [type=search] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n.tgbl-interface .tgbl-reset ::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n.tgbl-interface .tgbl-reset ::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n.tgbl-interface .tgbl-reset summary {\n  display: list-item;\n}\n.tgbl-interface .tgbl-reset blockquote,\n.tgbl-interface .tgbl-reset dl,\n.tgbl-interface .tgbl-reset dd,\n.tgbl-interface .tgbl-reset h1,\n.tgbl-interface .tgbl-reset h2,\n.tgbl-interface .tgbl-reset h3,\n.tgbl-interface .tgbl-reset h4,\n.tgbl-interface .tgbl-reset h5,\n.tgbl-interface .tgbl-reset h6,\n.tgbl-interface .tgbl-reset hr,\n.tgbl-interface .tgbl-reset figure,\n.tgbl-interface .tgbl-reset p,\n.tgbl-interface .tgbl-reset pre {\n  margin: 0;\n}\n.tgbl-interface .tgbl-reset fieldset {\n  margin: 0;\n  padding: 0;\n}\n.tgbl-interface .tgbl-reset legend {\n  padding: 0;\n}\n.tgbl-interface .tgbl-reset ol,\n.tgbl-interface .tgbl-reset ul,\n.tgbl-interface .tgbl-reset menu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.tgbl-interface .tgbl-reset dialog {\n  padding: 0;\n}\n.tgbl-interface .tgbl-reset textarea {\n  resize: vertical;\n}\n.tgbl-interface .tgbl-reset input::placeholder,\n.tgbl-interface .tgbl-reset textarea::placeholder {\n  opacity: 1;\n}\n.tgbl-interface .tgbl-reset :disabled {\n  cursor: default;\n}\n.tgbl-interface .tgbl-reset img,\n.tgbl-interface .tgbl-reset svg,\n.tgbl-interface .tgbl-reset video,\n.tgbl-interface .tgbl-reset canvas,\n.tgbl-interface .tgbl-reset audio,\n.tgbl-interface .tgbl-reset iframe,\n.tgbl-interface .tgbl-reset embed,\n.tgbl-interface .tgbl-reset object {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n.tgbl-interface .tgbl-reset img,\n.tgbl-interface .tgbl-reset video {\n  max-width: 100%;\n  height: auto;\n}\n.tgbl-interface .tgbl-reset [hidden] {\n  display: none;\n}\n.tgbl-interface label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: #2f2f2f;\n  text-transform: uppercase;\n}\n.tgbl-interface label:has(input[type=checkbox]), .tgbl-interface label:has(input[type=radio]), .tgbl-interface input[type=checkbox] + label, .tgbl-interface input[type=radio] + label {\n  text-transform: unset;\n  font-size: inherit;\n}\n.tgbl-interface input[type=text],\n.tgbl-interface input[type=number],\n.tgbl-interface input[type=url],\n.tgbl-interface input[type=search],\n.tgbl-interface input[type=date],\n.tgbl-interface input[type=month],\n.tgbl-interface input[type=week],\n.tgbl-interface input[type=time],\n.tgbl-interface input[type=datetime],\n.tgbl-interface input[type=datetime-local],\n.tgbl-interface input[type=email],\n.tgbl-interface input[type=tel],\n.tgbl-interface input[type=password] {\n  height: calc(3em - 10px);\n}\n.tgbl-interface input[type=text],\n.tgbl-interface input[type=number],\n.tgbl-interface input[type=url],\n.tgbl-interface input[type=search],\n.tgbl-interface input[type=date],\n.tgbl-interface input[type=month],\n.tgbl-interface input[type=week],\n.tgbl-interface input[type=time],\n.tgbl-interface input[type=datetime],\n.tgbl-interface input[type=datetime-local],\n.tgbl-interface input[type=email],\n.tgbl-interface input[type=tel],\n.tgbl-interface input[type=password],\n.tgbl-interface select,\n.tgbl-interface textarea {\n  box-sizing: content-box;\n  font-size: 14px;\n  line-height: calc(3em - 10px);\n  font-family: inherit;\n  padding-inline: 10px;\n  padding-block: 4px;\n  margin-block: 0.5em 1em;\n  --tgbl-input--border: #d6d6d6;\n  --tgbl-input--background: #ffffff;\n  --tgbl-input--text: #2f2f2f;\n  --tgbl-input--placeholder: #bbbbbb;\n  border: 1px solid 1px;\n  border-radius: 3px;\n  background-color: var(--tgbl-input--background);\n  min-width: 1px;\n  width: calc(100% - 22px);\n  max-width: calc(100% - 22px);\n  min-height: calc(3em - 10px);\n  transition-property: color, border-color, background-color;\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n}\n.tgbl-interface input[type=text]::placeholder,\n.tgbl-interface input[type=number]::placeholder,\n.tgbl-interface input[type=url]::placeholder,\n.tgbl-interface input[type=search]::placeholder,\n.tgbl-interface input[type=date]::placeholder,\n.tgbl-interface input[type=month]::placeholder,\n.tgbl-interface input[type=week]::placeholder,\n.tgbl-interface input[type=time]::placeholder,\n.tgbl-interface input[type=datetime]::placeholder,\n.tgbl-interface input[type=datetime-local]::placeholder,\n.tgbl-interface input[type=email]::placeholder,\n.tgbl-interface input[type=tel]::placeholder,\n.tgbl-interface input[type=password]::placeholder,\n.tgbl-interface select::placeholder,\n.tgbl-interface textarea::placeholder {\n  color: var(--tgbl-input--placeholder);\n}\n.tgbl-interface input[type=text]:focus, .tgbl-interface input[type=text]:focus-within,\n.tgbl-interface input[type=number]:focus,\n.tgbl-interface input[type=number]:focus-within,\n.tgbl-interface input[type=url]:focus,\n.tgbl-interface input[type=url]:focus-within,\n.tgbl-interface input[type=search]:focus,\n.tgbl-interface input[type=search]:focus-within,\n.tgbl-interface input[type=date]:focus,\n.tgbl-interface input[type=date]:focus-within,\n.tgbl-interface input[type=month]:focus,\n.tgbl-interface input[type=month]:focus-within,\n.tgbl-interface input[type=week]:focus,\n.tgbl-interface input[type=week]:focus-within,\n.tgbl-interface input[type=time]:focus,\n.tgbl-interface input[type=time]:focus-within,\n.tgbl-interface input[type=datetime]:focus,\n.tgbl-interface input[type=datetime]:focus-within,\n.tgbl-interface input[type=datetime-local]:focus,\n.tgbl-interface input[type=datetime-local]:focus-within,\n.tgbl-interface input[type=email]:focus,\n.tgbl-interface input[type=email]:focus-within,\n.tgbl-interface input[type=tel]:focus,\n.tgbl-interface input[type=tel]:focus-within,\n.tgbl-interface input[type=password]:focus,\n.tgbl-interface input[type=password]:focus-within,\n.tgbl-interface select:focus,\n.tgbl-interface select:focus-within,\n.tgbl-interface textarea:focus,\n.tgbl-interface textarea:focus-within {\n  --tgbl-input--border: #2563eb;\n  --tgbl-input--background: #ffffff;\n  --tgbl-input--text: #2f2f2f;\n  --tgbl-input--placeholder: #bbbbbb;\n  box-shadow: 1px 0 #2563eb;\n  outline: 2px solid rgba(0, 0, 0, 0);\n  outline-offset: 2px;\n}\n.tgbl-interface input[type=text][disabled],\n.tgbl-interface input[type=number][disabled],\n.tgbl-interface input[type=url][disabled],\n.tgbl-interface input[type=search][disabled],\n.tgbl-interface input[type=date][disabled],\n.tgbl-interface input[type=month][disabled],\n.tgbl-interface input[type=week][disabled],\n.tgbl-interface input[type=time][disabled],\n.tgbl-interface input[type=datetime][disabled],\n.tgbl-interface input[type=datetime-local][disabled],\n.tgbl-interface input[type=email][disabled],\n.tgbl-interface input[type=tel][disabled],\n.tgbl-interface input[type=password][disabled],\n.tgbl-interface select[disabled],\n.tgbl-interface textarea[disabled] {\n  --tgbl-input--border: #d6d6d6;\n  --tgbl-input--background: #f5f5f5;\n  --tgbl-input--text: #cccccc;\n  --tgbl-input--placeholder: #d6d6d6;\n}\n.tgbl-interface input[type=text]:invalid,\n.tgbl-interface input[type=number]:invalid,\n.tgbl-interface input[type=url]:invalid,\n.tgbl-interface input[type=search]:invalid,\n.tgbl-interface input[type=date]:invalid,\n.tgbl-interface input[type=month]:invalid,\n.tgbl-interface input[type=week]:invalid,\n.tgbl-interface input[type=time]:invalid,\n.tgbl-interface input[type=datetime]:invalid,\n.tgbl-interface input[type=datetime-local]:invalid,\n.tgbl-interface input[type=email]:invalid,\n.tgbl-interface input[type=tel]:invalid,\n.tgbl-interface input[type=password]:invalid,\n.tgbl-interface select:invalid,\n.tgbl-interface textarea:invalid {\n  --tgbl-input--border: #f87171;\n  --tgbl-input--background: #ffffff;\n  --tgbl-input--text: #2f2f2f;\n  --tgbl-input--placeholder: #bbbbbb;\n}\n.tgbl-interface select:not([multiple]) {\n  -webkit-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E1E1E' d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z' %3E%3C/path%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 10px top 50%;\n  background-size: auto;\n  background-size: 24px auto;\n  padding-right: calc(1em + 10px);\n  width: calc(100% - 22px - 1em);\n  max-width: calc(100% - 22px - 1em);\n}\n.tgbl-interface select:focus-visible, .tgbl-interface input[type=radio]:focus, .tgbl-interface input[type=checkbox]:focus {\n  outline: 1px solid transparent;\n  --tgbl-input--border: #60a5fa;\n  --tgbl-input--background: #ffffff;\n  --tgbl-input--text: #2f2f2f;\n  --tgbl-input--placeholder: #bbbbbb;\n  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;\n  outline: 2px solid rgba(0, 0, 0, 0);\n  outline-offset: 2px;\n}\n.tgbl-interface input[type=checkbox],\n.tgbl-interface input[type=radio] {\n  --tgbl-input--border: #d6d6d6;\n  --tgbl-input--background: #ffffff;\n  --tgbl-input--text: #2f2f2f;\n  --tgbl-input--placeholder: #bbbbbb;\n  border: 1px solid 1px;\n  margin: -1px 0.25em 0 -1px;\n  background-color: var(--tgbl-input--background);\n  color: var(--tgbl-input-text);\n  display: inline-flex;\n  line-height: 1;\n  text-align: center;\n  vertical-align: middle;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  -webkit-appearance: none;\n  transition: color, border-color, background-color 0.2s ease-in-out;\n}\n.tgbl-interface input[type=checkbox]:checked,\n.tgbl-interface input[type=radio]:checked {\n  background-color: #2563eb;\n  border-color: #2563eb;\n  color: #ffffff;\n}\n.tgbl-interface input[type=checkbox]:checked::before,\n.tgbl-interface input[type=radio]:checked::before {\n  margin: auto;\n}\n.tgbl-interface input[type=checkbox] {\n  border-radius: 3px;\n}\n.tgbl-interface input[type=checkbox]:checked::before {\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='m16.7 7.1-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' /%3E%3C/svg%3E\");\n  speak: never;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  height: unset;\n  float: unset;\n  margin: -3px;\n  width: calc(100% + 6px);\n}\n.tgbl-interface input[type=radio] {\n  border-radius: 100%;\n}\n.tgbl-interface input[type=radio]:checked::before {\n  content: \"\";\n  background-color: currentcolor;\n  border-radius: inherit;\n  width: 0.5rem;\n  height: 0.5rem;\n}\n.tgbl-interface input[type=submit],\n.tgbl-interface input[type=button],\n.tgbl-interface input[type=reset],\n.tgbl-interface button[type=submit],\n.tgbl-interface button[type=button],\n.tgbl-interface button[type=reset] {\n  --tgbl-color--button-background: $button-theme-background;\n  --tgbl-color--button-background-hovered: $button-theme-background-hover;\n  --tgbl-color--button-background-focused: $button-theme-background-focus;\n  --tgbl-color--button-background-disabled: $button-theme-background-disabled;\n  --tgbl-color--button-text: $button-theme-value;\n  --tgbl-color--button-text-hovered: $button-theme-value-hover;\n  --tgbl-color--button-text-focused: $button-theme-value-focus;\n  --tgbl-color--button-text-disabled: $button-theme-value-disabled;\n  --tgbl-color--button-border: $button-theme-border;\n  --tgbl-color--button-border-hovered: $button-theme-border-hover;\n  --tgbl-color--button-border-focused: $button-theme-border-focus;\n  --tgbl-color--button-border-outer-focused: $button-theme-outline-focus;\n  --tgbl-color--button-border-disabled: $button-theme-border-disabled;\n  cursor: pointer;\n  background-color: var(--tgbl-color--button-background);\n  color: var(--tgbl-color--button-text);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--tgbl-color--button-border);\n  border-radius: 3px;\n  text-align: center;\n  font-size: 14px;\n  line-height: 1.4;\n  font-weight: bold;\n  display: inline-flex;\n  gap: 0.25em;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 10px;\n  padding-block: 4px;\n  min-width: max-content;\n  width: auto;\n  transition-property: color, border-color, background-color;\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n}\n.tgbl-interface input[type=submit]:hover,\n.tgbl-interface input[type=button]:hover,\n.tgbl-interface input[type=reset]:hover,\n.tgbl-interface button[type=submit]:hover,\n.tgbl-interface button[type=button]:hover,\n.tgbl-interface button[type=reset]:hover {\n  background-color: var(--tgbl-color--button-background-hovered);\n  color: var(--tgbl-color--button-text-hovered);\n  border-color: var(--tgbl-color--button-border-hovered);\n}\n.tgbl-interface input[type=submit]:focus,\n.tgbl-interface input[type=button]:focus,\n.tgbl-interface input[type=reset]:focus,\n.tgbl-interface button[type=submit]:focus,\n.tgbl-interface button[type=button]:focus,\n.tgbl-interface button[type=reset]:focus {\n  background-color: var(--tgbl-color--button-background-focused);\n  color: var(--tgbl-color--button-text-focused);\n  border-color: var(--tgbl-color--button-border-focused);\n  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tgbl-color--button-border-outer-focused);\n  outline: 2px solid rgba(0, 0, 0, 0);\n  outline-offset: 2px;\n}\n.tgbl-interface input[type=submit][disabled], .tgbl-interface input[type=submit].disabled,\n.tgbl-interface input[type=button][disabled],\n.tgbl-interface input[type=button].disabled,\n.tgbl-interface input[type=reset][disabled],\n.tgbl-interface input[type=reset].disabled,\n.tgbl-interface button[type=submit][disabled],\n.tgbl-interface button[type=submit].disabled,\n.tgbl-interface button[type=button][disabled],\n.tgbl-interface button[type=button].disabled,\n.tgbl-interface button[type=reset][disabled],\n.tgbl-interface button[type=reset].disabled {\n  background-color: var(--tgbl-color--button-background-disabled);\n  color: var(--tgbl-color--button-text-disabled);\n  border-color: var(--tgbl-color--button-border-disabled);\n  cursor: not-allowed;\n}","@function encodecolor($string) {\r\n  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {\r\n    $hex: str-slice(ie-hex-str($string), 4);\r\n    $string: unquote('#{$hex}');\r\n\r\n    @return '%23' + $string;\r\n  }\r\n\r\n  @return $string;\r\n}\r\n\r\n$label-structure-font-size: 11px;\r\n$label-theme-font-weight: 500;\r\n$label-theme-text: $gray-800;\r\n$label-theme-transform: uppercase;\r\n\r\n$input-structure-border-width: 1px;\r\n$input-structure-border-style: solid;\r\n$input-structure-padding-inline: 10px;\r\n$input-structure-padding-block: 4px;\r\n$input-structure-height: calc(3em - #{2 *  $input-structure-padding-block + 2 * $input-structure-border-width});\r\n$input-structure-min-width: 1px;\r\n$input-structure-width: calc(100% - #{2 *  $input-structure-padding-inline + 2 * $input-structure-border-width});\r\n$input-structure-font-size: 14px;\r\n$input-structure-border-radius: 3px;\r\n$input-structure-line-height: $input-structure-height;\r\n$input-structure-outline-size: 2px;\r\n$input-structure-margin-block: 0.5em 1em;\r\n$input-structure-icon-size: 24px;\r\n\r\n$input-option-structure-size: 20px;\r\n$input-option-structure-size-touch: 24px;\r\n$input-option-theme-background-focus: $blue-600;\r\n$input-option-theme-foreground-focus: $white;\r\n\r\n$input-transition-property: color, border-color, background-color;\r\n$input-transition-timing-function: ease-in-out;\r\n$input-transition-duration: 0.2s;\r\n\r\n$input-theme-border: $gray-300;\r\n$input-theme-value: $gray-800;\r\n$input-theme-background: $white;\r\n$input-theme-icon: $gray-900;\r\n$input-theme-placeholder: $gray-500;\r\n\r\n$input-theme-border-focus: $blue-600;\r\n$input-theme-value-focus: $gray-800;\r\n$input-theme-background-focus: $white;\r\n$input-theme-icon-focus: $blue-600;\r\n$input-theme-placeholder-focus: $gray-500;\r\n$input-theme-outline-focus: $blue-600;\r\n\r\n$input-theme-border-focus-visible: $blue-400;\r\n$input-theme-value-focus-visible: $gray-800;\r\n$input-theme-background-focus-visible: $white;\r\n$input-theme-icon-focus-visible: $blue-600;\r\n$input-theme-placeholder-focus-visible: $gray-500;\r\n$input-theme-outline-focus-visible: $blue-600;\r\n\r\n$input-theme-border-disabled: $gray-300;\r\n$input-theme-value-disabled: $gray-400;\r\n$input-theme-background-disabled: $gray-50;\r\n$input-theme-icon-disabled: $gray-400;\r\n$input-theme-placeholder-disabled: $gray-300;\r\n\r\n$input-theme-border-invalid: $red-400;\r\n$input-theme-value-invalid: $gray-800;\r\n$input-theme-background-invalid: $white;\r\n$input-theme-icon-invalid: $red-500;\r\n$input-theme-placeholder-invalid: $gray-500;\r\n\r\n\r\n\r\nlabel {\r\n  display: block;\r\n  font-size: $label-structure-font-size;\r\n  font-weight: $label-theme-font-weight;\r\n  color: $label-theme-text; \r\n  text-transform: $label-theme-transform;\r\n}\r\n\r\nlabel:has(input[type=\"checkbox\"]), label:has(input[type=\"radio\"]), input[type=\"checkbox\"] + label, input[type=\"radio\"] + label {\r\n  text-transform: unset;\r\n  font-size: inherit;\r\n}\r\n\r\ninput[type=\"text\"], \r\ninput[type=\"number\"], \r\ninput[type=\"url\"], \r\ninput[type=\"search\"], \r\ninput[type=\"date\"], \r\ninput[type=\"month\"], \r\ninput[type=\"week\"], \r\ninput[type=\"time\"], \r\ninput[type=\"datetime\"], \r\ninput[type=\"datetime-local\"], \r\ninput[type=\"email\"], \r\ninput[type=\"tel\"], \r\ninput[type=\"password\"] {\r\n  height: $input-structure-height;\r\n}\r\n  \r\ninput[type=\"text\"], \r\ninput[type=\"number\"], \r\ninput[type=\"url\"], \r\ninput[type=\"search\"], \r\ninput[type=\"date\"], \r\ninput[type=\"month\"], \r\ninput[type=\"week\"], \r\ninput[type=\"time\"], \r\ninput[type=\"datetime\"], \r\ninput[type=\"datetime-local\"], \r\ninput[type=\"email\"], \r\ninput[type=\"tel\"], \r\ninput[type=\"password\"], \r\nselect,\r\ntextarea {\r\n  box-sizing: content-box;\r\n  font-size: $input-structure-font-size;\r\n  line-height: $input-structure-line-height;\r\n  font-family: inherit;\r\n  padding-inline: $input-structure-padding-inline;\r\n  padding-block: $input-structure-padding-block;\r\n  margin-block: $input-structure-margin-block;\r\n  --#{$prefix}input--border: #{$input-theme-border};\r\n  --#{$prefix}input--background: #{$input-theme-background};\r\n  --#{$prefix}input--text: #{$input-theme-value};\r\n  --#{$prefix}input--placeholder: #{$input-theme-placeholder};\r\n  border: $input-structure-border-width $input-structure-border-style $input-structure-border-width;\r\n  border-radius: $input-structure-border-radius;\r\n  background-color: var(--#{$prefix}input--background);\r\n  min-width: $input-structure-min-width;\r\n  width: $input-structure-width;\r\n  max-width: $input-structure-width;\r\n  min-height: $input-structure-height;\r\n  transition-property: $input-transition-property;\r\n  transition-duration: $input-transition-duration; \r\n  transition-timing-function: $input-transition-timing-function;\r\n\r\n  &::placeholder {\r\n    color: var(--#{$prefix}input--placeholder);\r\n  }\r\n  &:focus, &:focus-within {\r\n    --#{$prefix}input--border: #{$input-theme-border-focus};\r\n    --#{$prefix}input--background: #{$input-theme-background-focus};\r\n    --#{$prefix}input--text: #{$input-theme-value-focus};\r\n    --#{$prefix}input--placeholder: #{$input-theme-placeholder-focus};\r\n    box-shadow: $input-structure-border-width 0 $input-theme-outline-focus;\r\n    outline: 2px solid #0000;\r\n    outline-offset: 2px;\r\n  }\r\n  &[disabled] {\r\n    --#{$prefix}input--border: #{$input-theme-border-disabled};\r\n    --#{$prefix}input--background: #{$input-theme-background-disabled};\r\n    --#{$prefix}input--text: #{$input-theme-value-disabled};\r\n    --#{$prefix}input--placeholder: #{$input-theme-placeholder-disabled};\r\n  }\r\n  &:invalid {\r\n    --#{$prefix}input--border: #{$input-theme-border-invalid};\r\n    --#{$prefix}input--background: #{$input-theme-background-invalid};\r\n    --#{$prefix}input--text: #{$input-theme-value-invalid};\r\n    --#{$prefix}input--placeholder: #{$input-theme-placeholder-invalid};\r\n  }\r\n}\r\nselect:not([multiple]) {\r\n  -webkit-appearance: none;\r\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{encodecolor($input-theme-icon)}' d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z' %3E%3C/path%3E%3C/svg%3E\");\r\n  background-repeat: no-repeat;\r\n  background-position: right #{$input-structure-padding-inline} top 50%;\r\n  background-size: auto;\r\n  background-size: $input-structure-icon-size auto;\r\n  padding-right: calc(1em + $input-structure-padding-inline);\r\n  width: calc(100% - #{2 *  $input-structure-padding-inline + 2 * $input-structure-border-width} - 1em);\r\n  max-width: calc(100% - #{2 *  $input-structure-padding-inline + 2 * $input-structure-border-width} - 1em);\r\n}\r\nselect:focus-visible, input[type=\"radio\"]:focus, input[type=\"checkbox\"]:focus {\r\n  outline: 1px solid transparent;\r\n  --#{$prefix}input--border: #{$input-theme-border-focus-visible};\r\n  --#{$prefix}input--background: #{$input-theme-background-focus-visible};\r\n  --#{$prefix}input--text: #{$input-theme-value-focus-visible};\r\n  --#{$prefix}input--placeholder: #{$input-theme-placeholder-focus-visible};\r\n  box-shadow: 0 0 0 $input-structure-outline-size #fff, 0 0 0 calc($input-structure-outline-size*2) $input-theme-outline-focus-visible;\r\n  outline: 2px solid #0000;\r\n  outline-offset: 2px;\r\n}\r\n\r\ninput[type=checkbox],\r\ninput[type=radio] {\r\n  --#{$prefix}input--border: #{$input-theme-border};\r\n  --#{$prefix}input--background: #{$input-theme-background};\r\n  --#{$prefix}input--text: #{$input-theme-value};\r\n  --#{$prefix}input--placeholder: #{$input-theme-placeholder};\r\n  border: $input-structure-border-width $input-structure-border-style $input-structure-border-width;\r\n  margin: #{$input-structure-border-width * -1} 0.25em 0 #{$input-structure-border-width * -1};\r\n  background-color: var(--#{$prefix}input--background);\r\n  color: var(--#{$prefix}input-text);\r\n  display: inline-flex;\r\n  line-height: 1;\r\n  text-align: center;\r\n  vertical-align: middle;\r\n  width:$input-option-structure-size;\r\n  height:$input-option-structure-size;\r\n  min-width:$input-option-structure-size;\r\n  -webkit-appearance: none;\r\n  transition: $input-transition-property $input-transition-duration $input-transition-timing-function;\r\n\r\n  &:checked {\r\n    background-color: $input-option-theme-background-focus;\r\n    border-color: $input-option-theme-background-focus;\r\n    color: $input-option-theme-foreground-focus;\r\n  }\r\n  &:checked::before {\r\n    margin: auto;\r\n  }\r\n}\r\ninput[type=checkbox] {\r\n  border-radius: $input-structure-border-radius;\r\n  &:checked::before {\r\n    content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{encodecolor($input-option-theme-foreground-focus)}' d='m16.7 7.1-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' /%3E%3C/svg%3E\");\r\n    speak:never;\r\n    -webkit-font-smoothing:antialiased;\r\n    -moz-osx-font-smoothing:grayscale;\r\n    height: unset;\r\n    float: unset;\r\n    margin: #{$input-structure-border-width - 4px};\r\n    width: calc(100% + #{2 * $input-structure-border-width + 4px});\r\n  }\r\n}\r\ninput[type=radio] {             \r\n  border-radius: 100%;\r\n\r\n  &:checked::before {\r\n    content:\"\";\r\n    background-color:currentcolor;\r\n    border-radius: inherit;\r\n    width:.5rem;\r\n    height:.5rem;\r\n  }\r\n}\r\n","\r\n$black: #000000;\r\n$white: #ffffff;\r\n\r\n$purple-50: #faf5ff;\r\n$purple-100: #f3e8ff;\r\n$purple-200: #e9d5ff;\r\n$purple-300: #d8b4fe;\r\n$purple-400: #c084fc;\r\n$purple-500: #a855f7;\r\n$purple-600: #9333ea;\r\n$purple-700: #7e22ce;\r\n$purple-800: #6b21a8;\r\n$purple-900: #581c87;\r\n\r\n$blue-50: #eff6ff;\r\n$blue-100: #dbeafe;\r\n$blue-200: #bfdbfe;\r\n$blue-300: #93c5fd;\r\n$blue-400: #60a5fa;\r\n$blue-500: #3b82f6;\r\n$blue-600: #2563eb;\r\n$blue-700: #1d4ed8;\r\n$blue-800: #1e40af;\r\n$blue-900: #1e3a8a;\r\n\r\n$green-50: #f0fdf4;\r\n$green-100: #dcfce7;\r\n$green-200: #bbf7d0;\r\n$green-300: #86efac;\r\n$green-400: #4ade80;\r\n$green-500: #22c55e;\r\n$green-600: #16a34a;\r\n$green-700: #15803d;\r\n$green-800: #166534;\r\n$green-900: #14532d;\r\n\r\n$yellow-50: #fefce8;\r\n$yellow-100: #fef9c3;\r\n$yellow-200: #fef08a;\r\n$yellow-300: #fde047;\r\n$yellow-400: #facc15;\r\n$yellow-500: #eab308;\r\n$yellow-600: #ca8a04;\r\n$yellow-700: #a16207;\r\n$yellow-800: #854d0e;\r\n$yellow-900: #713f12;\r\n\r\n$orange-50: #fff7ed;\r\n$orange-100: #ffedd5;\r\n$orange-200: #fed7aa;\r\n$orange-300: #fdba74;\r\n$orange-400: #fb923c;\r\n$orange-500: #f97316;\r\n$orange-600: #ea580c;\r\n$orange-700: #c2410c;\r\n$orange-800: #9a3412;\r\n$orange-900: #7c2d12;\r\n\r\n$red-50: #fef2f2;\r\n$red-100: #fee2e2;\r\n$red-200: #fecaca;\r\n$red-300: #fca5a5;\r\n$red-400: #f87171;\r\n$red-500: #ef4444;\r\n$red-600: #dc2626;\r\n$red-700: #b91c1c;\r\n$red-800: #991b1b;\r\n$red-900: #7f1d1d;\r\n\r\n$gray-10:  #f5fcff;\r\n$gray-25:  #fafafa;\r\n$gray-50:  #f5f5f5;\r\n$gray-100: #f0f0f0;\r\n$gray-200: #e5e5e5;\r\n$gray-250: #E8F7FE;\r\n$gray-300: #d6d6d6;\r\n$gray-400: #cccccc;\r\n$gray-500: #bbbbbb;\r\n$gray-600: #949494;\r\n$gray-700: #757575;\r\n$gray-800: #2f2f2f;\r\n$gray-900: #1e1e1e;\r\n\r\n","$button-structure-border-width: 1px;\r\n$button-structure-border-style: solid;\r\n$button-structure-padding-inline: 10px;\r\n$button-structure-padding-block: 4px;\r\n$button-structure-min-width: max-content;\r\n$button-structure-width: auto;\r\n$button-structure-font-size: 14px;\r\n$button-structure-border-radius: 3px;\r\n$button-structure-line-height: 1.4;\r\n$button-structure-outline-size: 2px;\r\n$button-structure-icon-size: 1.4em;\r\n\r\n$button-transition-property: color, border-color, background-color;\r\n$button-transition-timing-function: ease-in-out;\r\n$button-transition-duration: 0.2s;\r\n\r\n$button-theme-border: $gray-300;\r\n$button-theme-value: $gray-800;\r\n$button-theme-background: $white;\r\n$button-theme-icon: $gray-900;\r\n\r\n$button-theme-border-hover: $blue-600;\r\n$button-theme-value-hover: $gray-800;\r\n$button-theme-background-hover: $white;\r\n$button-theme-icon-hover: $blue-600;\r\n$button-theme-outline-hover: $blue-600;\r\n\r\n\r\n$button-theme-border-focus: $blue-600;\r\n$button-theme-value-focus: $gray-800;\r\n$button-theme-background-focus: $white;\r\n$button-theme-icon-focus: $blue-600;\r\n$button-theme-outline-focus: $blue-600;\r\n\r\n$button-theme-border-focus-visible: $blue-400;\r\n$button-theme-value-focus-visible: $gray-800;\r\n$button-theme-background-focus-visible: $white;\r\n$button-theme-icon-focus-visible: $blue-600;\r\n$button-theme-outline-focus-visible: $blue-600;\r\n\r\n$button-theme-border-disabled: $gray-300;\r\n$button-theme-value-disabled: $gray-400;\r\n$button-theme-background-disabled: $gray-50;\r\n$button-theme-icon-disabled: $gray-400;\r\n\r\ninput[type=\"submit\"],\r\ninput[type=\"button\"],\r\ninput[type=\"reset\"],\r\nbutton[type=\"submit\"],\r\nbutton[type=\"button\"],\r\nbutton[type=\"reset\"] {\r\n  --#{$prefix}color--button-background: $button-theme-background;\r\n  --#{$prefix}color--button-background-hovered: $button-theme-background-hover;\r\n  --#{$prefix}color--button-background-focused: $button-theme-background-focus;\r\n  --#{$prefix}color--button-background-disabled: $button-theme-background-disabled;\r\n  --#{$prefix}color--button-text: $button-theme-value;\r\n  --#{$prefix}color--button-text-hovered: $button-theme-value-hover;\r\n  --#{$prefix}color--button-text-focused: $button-theme-value-focus;\r\n  --#{$prefix}color--button-text-disabled: $button-theme-value-disabled;\r\n  --#{$prefix}color--button-border: $button-theme-border;\r\n  --#{$prefix}color--button-border-hovered: $button-theme-border-hover;\r\n  --#{$prefix}color--button-border-focused: $button-theme-border-focus;\r\n  --#{$prefix}color--button-border-outer-focused: $button-theme-outline-focus;\r\n  --#{$prefix}color--button-border-disabled: $button-theme-border-disabled;\r\n  \r\n  cursor: pointer;\r\n  background-color: var(--#{$prefix}color--button-background);\r\n  color: var(--#{$prefix}color--button-text);\r\n  border-width: $button-structure-border-width;\r\n  border-style: $button-structure-border-style;\r\n  border-color: var(--#{$prefix}color--button-border);\r\n  border-radius: $button-structure-border-radius;\r\n  text-align: center;\r\n  font-size: $button-structure-font-size;\r\n  line-height: $button-structure-line-height;\r\n  font-weight: bold;\r\n  display: inline-flex;\r\n  gap: 0.25em;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-inline: $button-structure-padding-inline;\r\n  padding-block: $button-structure-padding-block;\r\n  min-width: $button-structure-min-width;\r\n  width: $button-structure-width;\r\n  transition-property: $button-transition-property;\r\n  transition-duration: $button-transition-duration; \r\n  transition-timing-function: $button-transition-timing-function;\r\n\r\n  &:hover {\r\n    background-color: var(--#{$prefix}color--button-background-hovered);\r\n    color: var(--#{$prefix}color--button-text-hovered);\r\n    border-color: var(--#{$prefix}color--button-border-hovered);\r\n  }\r\n  &:focus {\r\n    background-color: var(--#{$prefix}color--button-background-focused);\r\n    color: var(--#{$prefix}color--button-text-focused);\r\n    border-color: var(--#{$prefix}color--button-border-focused);\r\n    box-shadow: 0 0 0 $button-structure-outline-size #fff, 0 0 0 calc($button-structure-outline-size*2) var(--#{$prefix}color--button-border-outer-focused);\r\n    outline: 2px solid #0000;\r\n    outline-offset: 2px;\r\n  }\r\n  &[disabled], &.disabled {\r\n    background-color: var(--#{$prefix}color--button-background-disabled);\r\n    color: var(--#{$prefix}color--button-text-disabled);\r\n    border-color: var(--#{$prefix}color--button-border-disabled);\r\n    cursor: not-allowed;\r\n  }\r\n}"]}
\ No newline at end of file
diff --git a/build/index.html b/build/index.html
new file mode 100644
index 0000000..a828ed3
--- /dev/null
+++ b/build/index.html
@@ -0,0 +1,568 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Tangible Design</title>
+    <meta
+      name="description"
+      content="Building blocks for creating design systems"
+    />
+
+    <link rel="stylesheet" href="design.min.css" />
+  </head>
+
+  <body class="tgbl-interface">
+
+    <!-- Header -->
+    <header class="container">
+      <hgroup>
+        <h1>Tangible Design</h1>
+        <p>Clean simple foundation and building blocks for creating design systems</p>
+      </hgroup>
+      <nav>
+        <ul>
+          <li>
+            <details class="dropdown">
+              <summary role="button" class="secondary">Theme</summary>
+              <ul>
+                <li><a href="#" data-theme-switcher="auto">Auto</a></li>
+                <li><a href="#" data-theme-switcher="light">Light</a></li>
+                <li><a href="#" data-theme-switcher="dark">Dark</a></li>
+              </ul>
+            </details>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <!-- ./ Header -->
+
+    <!-- Main -->
+    <main class="container">
+      <!-- Preview -->
+      <section id="preview">
+        <h2>Preview</h2>
+        <p>
+          Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet
+          suscipit sapien. Nulla iaculis eros a elit pharetra egestas.
+        </p>
+        <form>
+          <div class="grid">
+            <input
+              type="text"
+              name="firstname"
+              placeholder="First name"
+              aria-label="First name"
+              required
+            />
+            <input
+              type="email"
+              name="email"
+              placeholder="Email address"
+              aria-label="Email address"
+              autocomplete="email"
+              required
+            />
+            <button type="submit">Subscribe</button>
+          </div>
+          <fieldset>
+            <label for="terms">
+              <input type="checkbox" role="switch" id="terms" name="terms" />
+              I agree to the
+              <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
+            </label>
+          </fieldset>
+        </form>
+      </section>
+      <!-- ./ Preview -->
+
+      <!-- Typography-->
+      <section id="typography">
+        <h2>Typography</h2>
+        <p>
+          Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget
+          efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat
+          turpis pretium. Quisque sed tristique felis.
+        </p>
+
+        <!-- Blockquote-->
+        <blockquote>
+          "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
+          Nam at dui sit amet ipsum cursus ornare."
+          <footer>
+            <cite>- Phasellus eget lacinia</cite>
+          </footer>
+        </blockquote>
+
+        <!-- Lists-->
+        <h3>Lists</h3>
+        <ul>
+          <li>Aliquam lobortis lacus eu libero ornare facilisis.</li>
+          <li>Nam et magna at libero scelerisque egestas.</li>
+          <li>Suspendisse id nisl ut leo finibus vehicula quis eu ex.</li>
+          <li>Proin ultricies turpis et volutpat vehicula.</li>
+        </ul>
+
+        <!-- Inline text elements-->
+        <h3>Inline text elements</h3>
+        <div class="grid">
+          <p><a href="#" onclick="event.preventDefault()">Primary link</a></p>
+          <p>
+            <a href="#" class="secondary" onclick="event.preventDefault()"
+              >Secondary link</a
+            >
+          </p>
+          <p>
+            <a href="#" class="contrast" onclick="event.preventDefault()"
+              >Contrast link</a
+            >
+          </p>
+        </div>
+        <div class="grid">
+          <p><strong>Bold</strong></p>
+          <p><em>Italic</em></p>
+          <p><u>Underline</u></p>
+        </div>
+        <div class="grid">
+          <p><del>Deleted</del></p>
+          <p><ins>Inserted</ins></p>
+          <p><s>Strikethrough</s></p>
+        </div>
+        <div class="grid">
+          <p><small>Small </small></p>
+          <p>Text <sub>Sub</sub></p>
+          <p>Text <sup>Sup</sup></p>
+        </div>
+        <div class="grid">
+          <p>
+            <abbr title="Abbreviation" data-tooltip="Abbreviation">Abbr.</abbr>
+          </p>
+          <p><kbd>Kbd</kbd></p>
+          <p><mark>Highlighted</mark></p>
+        </div>
+
+        <!-- Headings-->
+        <h3>Heading 3</h3>
+        <p>
+          Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis
+          ipsum, at efficitur sem scelerisque vel. Aliquam auctor diam ut purus
+          cursus fringilla. Class aptent taciti sociosqu ad litora torquent per
+          conubia nostra, per inceptos himenaeos.
+        </p>
+        <h4>Heading 4</h4>
+        <p>
+          Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at
+          blandit nibh. Donec ac fermentum felis. Vivamus tincidunt arcu ut
+          lacus hendrerit, eget mattis dui finibus.
+        </p>
+        <h5>Heading 5</h5>
+        <p>
+          Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris
+          maximus ante in consequat luctus. Morbi euismod sagittis efficitur.
+          Aenean non eros orci. Vivamus ut diam sem.
+        </p>
+        <h6>Heading 6</h6>
+        <p>
+          Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum
+          tincidunt nulla ut tortor posuere, vitae malesuada tortor molestie.
+          Sed nec interdum dolor. Vestibulum id auctor nisi, a efficitur sem.
+          Aliquam sollicitudin efficitur turpis, sollicitudin hendrerit ligula
+          semper id. Nunc risus felis, egestas eu tristique eget, convallis in
+          velit.
+        </p>
+
+        <!-- Medias-->
+        <figure>
+          <img
+            src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
+            alt="Minimal landscape"
+          />
+          <figcaption>
+            Image from
+            <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank"
+              >unsplash.com</a
+            >
+          </figcaption>
+        </figure>
+      </section>
+      <!-- ./ Typography-->
+
+      <!-- Buttons-->
+      <section id="buttons">
+        <h2>Buttons</h2>
+        <p class="grid">
+          <button>Primary</button>
+          <button class="secondary">Secondary</button>
+          <button class="contrast">Contrast</button>
+        </p>
+        <p class="grid">
+          <button class="outline">Primary outline</button>
+          <button class="outline secondary">Secondary outline</button>
+          <button class="outline contrast">Contrast outline</button>
+        </p>
+      </section>
+      <!-- ./ Buttons -->
+
+      <!-- Form elements-->
+      <section id="form">
+        <form>
+          <h2>Form elements</h2>
+
+          <!-- Search -->
+          <label for="search">Search</label>
+          <input type="search" id="search" name="search" placeholder="Search" />
+
+          <!-- Text -->
+          <label for="text">Text</label>
+          <input type="text" id="text" name="text" placeholder="Text" />
+          <small>Curabitur consequat lacus at lacus porta finibus.</small>
+
+          <!-- Select -->
+          <label for="select">Select</label>
+          <select id="select" name="select" required>
+            <option value="" selected>Select…</option>
+            <option>…</option>
+          </select>
+
+          <!-- File browser -->
+          <label for="file"
+            >File browser
+            <input type="file" id="file" name="file" />
+          </label>
+
+          <!-- Range slider control -->
+          <label for="range"
+            >Range slider
+            <input
+              type="range"
+              min="0"
+              max="100"
+              value="50"
+              id="range"
+              name="range"
+            />
+          </label>
+
+          <!-- States -->
+          <div class="grid">
+            <label for="valid">
+              Valid
+              <input
+                type="text"
+                id="valid"
+                name="valid"
+                placeholder="Valid"
+                aria-invalid="false"
+              />
+            </label>
+            <label for="invalid">
+              Invalid
+              <input
+                type="text"
+                id="invalid"
+                name="invalid"
+                placeholder="Invalid"
+                aria-invalid="true"
+              />
+            </label>
+            <label for="disabled">
+              Disabled
+              <input
+                type="text"
+                id="disabled"
+                name="disabled"
+                placeholder="Disabled"
+                disabled
+              />
+            </label>
+          </div>
+
+          <div class="grid">
+            <!-- Date-->
+            <label for="date"
+              >Date
+              <input type="date" id="date" name="date" />
+            </label>
+
+            <!-- Time-->
+            <label for="time"
+              >Time
+              <input type="time" id="time" name="time" />
+            </label>
+
+            <!-- Color-->
+            <label for="color"
+              >Color
+              <input type="color" id="color" name="color" value="#0eaaaa" />
+            </label>
+          </div>
+
+          <div class="grid">
+            <!-- Checkboxes -->
+            <fieldset>
+              <legend><strong>Checkboxes</strong></legend>
+              <label for="checkbox-1">
+                <input
+                  type="checkbox"
+                  id="checkbox-1"
+                  name="checkbox-1"
+                  checked
+                />
+                Checkbox
+              </label>
+              <label for="checkbox-2">
+                <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+                Checkbox
+              </label>
+            </fieldset>
+
+            <!-- Radio buttons -->
+            <fieldset>
+              <legend><strong>Radio buttons</strong></legend>
+              <label for="radio-1">
+                <input
+                  type="radio"
+                  id="radio-1"
+                  name="radio"
+                  value="radio-1"
+                  checked
+                />
+                Radio button
+              </label>
+              <label for="radio-2">
+                <input type="radio" id="radio-2" name="radio" value="radio-2" />
+                Radio button
+              </label>
+            </fieldset>
+
+            <!-- Switch -->
+            <fieldset>
+              <legend><strong>Switches</strong></legend>
+              <label for="switch-1">
+                <input
+                  type="checkbox"
+                  id="switch-1"
+                  name="switch-1"
+                  role="switch"
+                  checked
+                />
+                Switch
+              </label>
+              <label for="switch-2">
+                <input
+                  type="checkbox"
+                  id="switch-2"
+                  name="switch-2"
+                  role="switch"
+                />
+                Switch
+              </label>
+            </fieldset>
+          </div>
+
+          <!-- Buttons -->
+          <input type="reset" value="Reset" onclick="event.preventDefault()" />
+          <input
+            type="submit"
+            value="Submit"
+            onclick="event.preventDefault()"
+          />
+        </form>
+      </section>
+      <!-- ./ Form elements-->
+
+      <!-- Tables -->
+      <section id="tables">
+        <h2>Tables</h2>
+        <div class="overflow-auto">
+          <table class="striped">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <!-- ./ Tables -->
+
+      <!-- Modal -->
+      <section id="modal">
+        <h2>Modal</h2>
+        <button
+          class="contrast"
+          data-target="modal-example"
+          onclick="toggleModal(event)"
+        >
+          Launch demo modal
+        </button>
+      </section>
+      <!-- ./ Modal -->
+
+      <!-- Accordions -->
+      <section id="accordions">
+        <h2>Accordions</h2>
+        <details>
+          <summary>Accordion 1</summary>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque urna diam, tincidunt nec porta sed, auctor id velit.
+            Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo.
+            Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis
+            lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris
+            pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac
+            ipsum ultrices, porta turpis sit amet, congue turpis.
+          </p>
+        </details>
+        <details open>
+          <summary>Accordion 2</summary>
+          <ul>
+            <li>Vestibulum id elit quis massa interdum sodales.</li>
+            <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
+            <li>Quisque sed eros non eros ornare elementum.</li>
+            <li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
+          </ul>
+        </details>
+      </section>
+      <!-- ./ Accordions -->
+
+      <!-- Article-->
+      <article id="article">
+        <h2>Article</h2>
+        <p>
+          Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed
+          ultricies dolor non ante vulputate hendrerit. Vivamus sit amet
+          suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc
+          placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra
+          rutrum.
+        </p>
+        <footer>
+          <small
+            >Duis nec elit placerat, suscipit nibh quis, finibus neque.</small
+          >
+        </footer>
+      </article>
+      <!-- ./ Article-->
+
+      <!-- Group -->
+      <section id="group">
+        <h2>Group</h2>
+        <form>
+          <fieldset role="group">
+            <input
+              name="email"
+              type="email"
+              placeholder="Enter your email"
+              autocomplete="email"
+            />
+            <input type="submit" value="Subscribe" />
+          </fieldset>
+        </form>
+      </section>
+      <!-- ./ Group -->
+
+      <!-- Progress -->
+      <section id="progress">
+        <h2>Progress bar</h2>
+        <progress id="progress-1" value="25" max="100"></progress>
+        <progress id="progress-2"></progress>
+      </section>
+      <!-- ./ Progress -->
+
+      <!-- Loading -->
+      <section id="loading">
+        <h2>Loading</h2>
+        <article aria-busy="true"></article>
+        <button aria-busy="true">Please wait…</button>
+      </section>
+      <!-- ./ Loading -->
+    </main>
+    <!-- ./ Main -->
+
+    <!-- Footer -->
+    <footer class="container"></footer>
+    <!-- ./ Footer -->
+
+    <!-- Modal example -->
+    <dialog id="modal-example">
+      <article>
+        <header>
+          <button
+            aria-label="Close"
+            rel="prev"
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+          ></button>
+          <h3>Confirm your action!</h3>
+        </header>
+        <p>
+          Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue
+          finibus pellentesque. Nullam finibus risus non semper euismod.
+        </p>
+        <footer>
+          <button
+            role="button"
+            class="secondary"
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+          >
+            Cancel</button
+          ><button
+            autofocus
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+          >
+            Confirm
+          </button>
+        </footer>
+      </article>
+    </dialog>
+    <!-- ./ Modal example -->
+
+    <!-- Minimal theme switcher -->
+    <script src="theme-switcher.js"></script>
+
+    <!-- Modal -->
+    <script src="modal.js"></script>
+  </body>
+</html>
diff --git a/build/modal.js b/build/modal.js
new file mode 100644
index 0000000..a413e5a
--- /dev/null
+++ b/build/modal.js
@@ -0,0 +1,72 @@
+/**
+ * Modal
+ */
+
+// Config
+const isOpenClass = "modal-is-open";
+const openingClass = "modal-is-opening";
+const closingClass = "modal-is-closing";
+const scrollbarWidthCssVar = "--tgbl-scrollbar-width";
+const animationDuration = 400; // ms
+let visibleModal = null;
+
+// Toggle modal
+const toggleModal = (event) => {
+  event.preventDefault();
+  const modal = document.getElementById(event.currentTarget.dataset.target);
+  if (!modal) return;
+  modal && (modal.open ? closeModal(modal) : openModal(modal));
+};
+
+// Open modal
+const openModal = (modal) => {
+  const { documentElement: html } = document;
+  const scrollbarWidth = getScrollbarWidth();
+  if (scrollbarWidth) {
+    html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
+  }
+  html.classList.add(isOpenClass, openingClass);
+  setTimeout(() => {
+    visibleModal = modal;
+    html.classList.remove(openingClass);
+  }, animationDuration);
+  modal.showModal();
+};
+
+// Close modal
+const closeModal = (modal) => {
+  visibleModal = null;
+  const { documentElement: html } = document;
+  html.classList.add(closingClass);
+  setTimeout(() => {
+    html.classList.remove(closingClass, isOpenClass);
+    html.style.removeProperty(scrollbarWidthCssVar);
+    modal.close();
+  }, animationDuration);
+};
+
+// Close with a click outside
+document.addEventListener("click", (event) => {
+  if (visibleModal === null) return;
+  const modalContent = visibleModal.querySelector("article");
+  const isClickInside = modalContent.contains(event.target);
+  !isClickInside && closeModal(visibleModal);
+});
+
+// Close with Esc key
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && visibleModal) {
+    closeModal(visibleModal);
+  }
+});
+
+// Get scrollbar width
+const getScrollbarWidth = () => {
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+  return scrollbarWidth;
+};
+
+// Is scrollbar visible
+const isScrollbarVisible = () => {
+  return document.body.scrollHeight > screen.height;
+};
diff --git a/build/theme-switcher.js b/build/theme-switcher.js
new file mode 100644
index 0000000..14ef8b1
--- /dev/null
+++ b/build/theme-switcher.js
@@ -0,0 +1,76 @@
+/**
+ * Theme switcher
+ */
+
+const themeSwitcher = {
+  // Config
+  _scheme: "auto",
+  menuTarget: "details.dropdown",
+  buttonsTarget: "a[data-theme-switcher]",
+  buttonAttribute: "data-theme-switcher",
+  rootAttribute: "data-theme",
+  localStorageKey: "tgblPreferredColorScheme",
+
+  // Init
+  init() {
+    this.scheme = this.schemeFromLocalStorage;
+    this.initSwitchers();
+  },
+
+  // Get color scheme from local storage
+  get schemeFromLocalStorage() {
+    return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+  },
+
+  // Preferred color scheme
+  get preferredColorScheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  },
+
+  // Init switchers
+  initSwitchers() {
+    const buttons = document.querySelectorAll(this.buttonsTarget);
+    buttons.forEach((button) => {
+      button.addEventListener(
+        "click",
+        (event) => {
+          event.preventDefault();
+          // Set scheme
+          this.scheme = button.getAttribute(this.buttonAttribute);
+          // Close dropdown
+          document.querySelector(this.menuTarget)?.removeAttribute("open");
+        },
+        false
+      );
+    });
+  },
+
+  // Set scheme
+  set scheme(scheme) {
+    if (scheme == "auto") {
+      this._scheme = this.preferredColorScheme;
+    } else if (scheme == "dark" || scheme == "light") {
+      this._scheme = scheme;
+    }
+    this.applyScheme();
+    this.schemeToLocalStorage();
+  },
+
+  // Get scheme
+  get scheme() {
+    return this._scheme;
+  },
+
+  // Apply scheme
+  applyScheme() {
+    document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+  },
+
+  // Store scheme to local storage
+  schemeToLocalStorage() {
+    window.localStorage?.setItem(this.localStorageKey, this.scheme);
+  },
+};
+
+// Init
+themeSwitcher.init();
diff --git a/colors/index.scss b/colors/index.scss
new file mode 100644
index 0000000..52f2667
--- /dev/null
+++ b/colors/index.scss
@@ -0,0 +1,885 @@
+$black: #000;
+$white: #fff;
+
+// Red
+$red-950: #1c0d06;
+$red-900: #30130a;
+$red-850: #45150c;
+$red-800: #5c160d;
+$red-750: #72170f;
+$red-700: #861d13;
+$red-650: #9b2318;
+$red-600: #af291d;
+$red-550: #c52f21;
+$red-500: #d93526;
+$red-450: #ee402e;
+$red-400: #f06048;
+$red-350: #f17961;
+$red-300: #f38f79;
+$red-250: #f5a390;
+$red-200: #f5b7a8;
+$red-150: #f6cabf;
+$red-100: #f8dcd6;
+$red-50: #faeeeb;
+$red: $red-550;
+
+// Pink
+$pink-950: #25060c;
+$pink-900: #380916;
+$pink-850: #4b0c1f;
+$pink-800: #5f0e28;
+$pink-750: #740f31;
+$pink-700: #88143b;
+$pink-650: #9d1945;
+$pink-600: #b21e4f;
+$pink-550: #c72259;
+$pink-500: #d92662;
+$pink-450: #f42c6f;
+$pink-400: #f6547e;
+$pink-350: #f7708e;
+$pink-300: #f8889e;
+$pink-250: #f99eae;
+$pink-200: #f9b4be;
+$pink-150: #f9c8ce;
+$pink-100: #f9dbdf;
+$pink-50: #fbedef;
+$pink: $pink-500;
+
+// Fuchsia
+$fuchsia-950: #230518;
+$fuchsia-900: #360925;
+$fuchsia-850: #480b33;
+$fuchsia-800: #5c0d41;
+$fuchsia-750: #700e4f;
+$fuchsia-700: #84135e;
+$fuchsia-650: #98176d;
+$fuchsia-600: #ac1c7c;
+$fuchsia-550: #c1208b;
+$fuchsia-500: #d9269d;
+$fuchsia-450: #ed2aac;
+$fuchsia-400: #f748b7;
+$fuchsia-350: #f869bf;
+$fuchsia-300: #f983c7;
+$fuchsia-250: #fa9acf;
+$fuchsia-200: #f9b1d8;
+$fuchsia-150: #f9c6e1;
+$fuchsia-100: #f9daea;
+$fuchsia-50: #fbedf4;
+$fuchsia: $fuchsia-550;
+
+// Purple
+$purple-950: #1e0820;
+$purple-900: #2d0f33;
+$purple-850: #3d1545;
+$purple-800: #4d1a57;
+$purple-750: #5e206b;
+$purple-700: #6f277d;
+$purple-650: #802e90;
+$purple-600: #9236a4;
+$purple-550: #aa40bf;
+$purple-500: #b645cd;
+$purple-450: #c652dc;
+$purple-400: #cd68e0;
+$purple-350: #d47de4;
+$purple-300: #db90e8;
+$purple-250: #e2a3eb;
+$purple-200: #e7b6ee;
+$purple-150: #edc9f1;
+$purple-100: #f2dcf4;
+$purple-50: #f8eef9;
+$purple: $purple-600;
+
+// Violet
+$violet-950: #190928;
+$violet-900: #251140;
+$violet-850: #321856;
+$violet-800: #3f1e6d;
+$violet-750: #4d2585;
+$violet-700: #5b2d9c;
+$violet-650: #6935b3;
+$violet-600: #7540bf;
+$violet-550: #8352c5;
+$violet-500: #9062ca;
+$violet-450: #9b71cf;
+$violet-400: #a780d4;
+$violet-350: #b290d9;
+$violet-300: #bd9fdf;
+$violet-250: #c9afe4;
+$violet-200: #d3bfe8;
+$violet-150: #decfed;
+$violet-100: #e8dff2;
+$violet-50: #f3eff7;
+$violet: $violet-600;
+
+// Indigo
+$indigo-950: #110b31;
+$indigo-900: #181546;
+$indigo-850: #1f1e5e;
+$indigo-800: #272678;
+$indigo-750: #2f2f92;
+$indigo-700: #3838ab;
+$indigo-650: #4040bf;
+$indigo-600: #524ed2;
+$indigo-550: #655cd6;
+$indigo-500: #7569da;
+$indigo-450: #8577dd;
+$indigo-400: #9486e1;
+$indigo-350: #a294e5;
+$indigo-300: #b0a3e8;
+$indigo-250: #bdb2ec;
+$indigo-200: #cac1ee;
+$indigo-150: #d8d0f1;
+$indigo-100: #e5e0f4;
+$indigo-50: #f2f0f9;
+$indigo: $indigo-600;
+
+// Blue
+$blue-950: #080f2d;
+$blue-900: #0c1a41;
+$blue-850: #0e2358;
+$blue-800: #0f2d70;
+$blue-750: #0f3888;
+$blue-700: #1343a0;
+$blue-650: #184eb8;
+$blue-600: #1d59d0;
+$blue-550: #2060df;
+$blue-500: #3c71f7;
+$blue-450: #5c7ef8;
+$blue-400: #748bf8;
+$blue-350: #8999f9;
+$blue-300: #9ca7fa;
+$blue-250: #aeb5fb;
+$blue-200: #bfc3fa;
+$blue-150: #d0d2fa;
+$blue-100: #e0e1fa;
+$blue-50: #f0f0fb;
+$blue: $blue-550;
+
+// Azure
+$azure-950: #04121d;
+$azure-900: #061e2f;
+$azure-850: #052940;
+$azure-800: #033452;
+$azure-750: #014063;
+$azure-700: #014c75;
+$azure-650: #015887;
+$azure-600: #02659a;
+$azure-550: #0172ad;
+$azure-500: #017fc0;
+$azure-450: #018cd4;
+$azure-400: #029ae8;
+$azure-350: #01aaff;
+$azure-300: #51b4ff;
+$azure-250: #79c0ff;
+$azure-200: #9bccfd;
+$azure-150: #b7d9fc;
+$azure-100: #d1e5fb;
+$azure-50: #e9f2fc;
+$azure: $azure-550;
+
+// Cyan
+$cyan-950: #041413;
+$cyan-900: #051f1f;
+$cyan-850: #052b2b;
+$cyan-800: #043737;
+$cyan-750: #014343;
+$cyan-700: #015050;
+$cyan-650: #025d5d;
+$cyan-600: #046a6a;
+$cyan-550: #047878;
+$cyan-500: #058686;
+$cyan-450: #059494;
+$cyan-400: #05a2a2;
+$cyan-350: #0ab1b1;
+$cyan-300: #0ac2c2;
+$cyan-250: #0ccece;
+$cyan-200: #25dddd;
+$cyan-150: #3deceb;
+$cyan-100: #58faf9;
+$cyan-50: #c3fcfa;
+$cyan: $cyan-550;
+
+// Jade
+$jade-950: #04140c;
+$jade-900: #052014;
+$jade-850: #042c1b;
+$jade-800: #033823;
+$jade-750: #00452b;
+$jade-700: #015234;
+$jade-650: #005f3d;
+$jade-600: #006d46;
+$jade-550: #007a50;
+$jade-500: #00895a;
+$jade-450: #029764;
+$jade-400: #00a66e;
+$jade-350: #00b478;
+$jade-300: #00c482;
+$jade-250: #00cc88;
+$jade-200: #21e299;
+$jade-150: #39f1a6;
+$jade-100: #70fcba;
+$jade-50: #cbfce1;
+$jade: $jade-550;
+
+// Green
+$green-950: #0b1305;
+$green-900: #131f07;
+$green-850: #152b07;
+$green-800: #173806;
+$green-750: #1a4405;
+$green-700: #205107;
+$green-650: #265e09;
+$green-600: #2c6c0c;
+$green-550: #33790f;
+$green-500: #398712;
+$green-450: #409614;
+$green-400: #47a417;
+$green-350: #4eb31b;
+$green-300: #55c21e;
+$green-250: #5dd121;
+$green-200: #62d926;
+$green-150: #77ef3d;
+$green-100: #95fb62;
+$green-50: #d7fbc1;
+$green: $green-500;
+
+// Lime
+$lime-950: #101203;
+$lime-900: #191d03;
+$lime-850: #202902;
+$lime-800: #273500;
+$lime-750: #304100;
+$lime-700: #394d00;
+$lime-650: #435a00;
+$lime-600: #4d6600;
+$lime-550: #577400;
+$lime-500: #628100;
+$lime-450: #6c8f00;
+$lime-400: #779c00;
+$lime-350: #82ab00;
+$lime-300: #8eb901;
+$lime-250: #99c801;
+$lime-200: #a5d601;
+$lime-150: #b2e51a;
+$lime-100: #c1f335;
+$lime-50: #defc85;
+$lime: $lime-200;
+
+// Yellow
+$yellow-950: #141103;
+$yellow-900: #1f1c02;
+$yellow-850: #2b2600;
+$yellow-800: #363100;
+$yellow-750: #423c00;
+$yellow-700: #4e4700;
+$yellow-650: #5b5300;
+$yellow-600: #685f00;
+$yellow-550: #756b00;
+$yellow-500: #827800;
+$yellow-450: #908501;
+$yellow-400: #9e9200;
+$yellow-350: #ad9f00;
+$yellow-300: #bbac00;
+$yellow-250: #caba01;
+$yellow-200: #d9c800;
+$yellow-150: #e8d600;
+$yellow-100: #f2df0d;
+$yellow-50: #fdf1b4;
+$yellow: $yellow-100;
+
+// Amber
+$amber-950: #161003;
+$amber-900: #231a03;
+$amber-850: #312302;
+$amber-800: #3f2d00;
+$amber-750: #4d3700;
+$amber-700: #5b4200;
+$amber-650: #694d00;
+$amber-600: #785800;
+$amber-550: #876400;
+$amber-500: #977000;
+$amber-450: #a77c00;
+$amber-400: #b78800;
+$amber-350: #c79400;
+$amber-300: #d8a100;
+$amber-250: #e8ae01;
+$amber-200: #ffbf00;
+$amber-150: #fecc63;
+$amber-100: #fddea6;
+$amber-50: #fcefd9;
+$amber: $amber-200;
+
+// Pumpkin
+$pumpkin-950: #180f04;
+$pumpkin-900: #271805;
+$pumpkin-850: #372004;
+$pumpkin-800: #482802;
+$pumpkin-750: #593100;
+$pumpkin-700: #693a00;
+$pumpkin-650: #7a4400;
+$pumpkin-600: #8b4f00;
+$pumpkin-550: #9c5900;
+$pumpkin-500: #ad6400;
+$pumpkin-450: #bf6e00;
+$pumpkin-400: #d27a01;
+$pumpkin-350: #e48500;
+$pumpkin-300: #ff9500;
+$pumpkin-250: #ffa23a;
+$pumpkin-200: #feb670;
+$pumpkin-150: #fcca9b;
+$pumpkin-100: #fcdcc1;
+$pumpkin-50: #fceee3;
+$pumpkin: $pumpkin-300;
+
+// Orange
+$orange-950: #1b0d06;
+$orange-900: #2d1509;
+$orange-850: #411a0a;
+$orange-800: #561e0a;
+$orange-750: #6b220a;
+$orange-700: #7f270b;
+$orange-650: #942d0d;
+$orange-600: #a83410;
+$orange-550: #bd3c13;
+$orange-500: #d24317;
+$orange-450: #e74b1a;
+$orange-400: #f45d2c;
+$orange-350: #f56b3d;
+$orange-300: #f68e68;
+$orange-250: #f8a283;
+$orange-200: #f8b79f;
+$orange-150: #f8cab9;
+$orange-100: #f9dcd2;
+$orange-50: #faeeea;
+$orange: $orange-500;
+
+// Sand
+$sand-950: #111110;
+$sand-900: #1c1b19;
+$sand-850: #272622;
+$sand-800: #32302b;
+$sand-750: #3d3b35;
+$sand-700: #49463f;
+$sand-650: #55524a;
+$sand-600: #615e55;
+$sand-550: #6e6a60;
+$sand-500: #7b776b;
+$sand-450: #888377;
+$sand-400: #959082;
+$sand-350: #a39e8f;
+$sand-300: #b0ab9b;
+$sand-250: #beb8a7;
+$sand-200: #ccc6b4;
+$sand-150: #dad4c2;
+$sand-100: #e8e2d2;
+$sand-50: #f2f0ec;
+$sand: $sand-200;
+
+// Grey
+$grey-950: #111111;
+$grey-900: #1b1b1b;
+$grey-850: #262626;
+$grey-800: #303030;
+$grey-750: #3b3b3b;
+$grey-700: #474747;
+$grey-650: #525252;
+$grey-600: #5e5e5e;
+$grey-550: #6a6a6a;
+$grey-500: #777777;
+$grey-450: #808080;
+$grey-400: #919191;
+$grey-350: #9e9e9e;
+$grey-300: #ababab;
+$grey-250: #b9b9b9;
+$grey-200: #c6c6c6;
+$grey-150: #d4d4d4;
+$grey-100: #e2e2e2;
+$grey-50: #f1f1f1;
+$grey: $grey-300;
+
+// Zinc
+$zinc-950: #0f1114;
+$zinc-900: #191c20;
+$zinc-850: #23262c;
+$zinc-800: #2d3138;
+$zinc-750: #373c44;
+$zinc-700: #424751;
+$zinc-650: #4d535e;
+$zinc-600: #5c6370;
+$zinc-550: #646b79;
+$zinc-500: #6f7887;
+$zinc-450: #7b8495;
+$zinc-400: #8891a4;
+$zinc-350: #969eaf;
+$zinc-300: #a4acba;
+$zinc-250: #b3b9c5;
+$zinc-200: #c2c7d0;
+$zinc-150: #d1d5db;
+$zinc-100: #e0e3e7;
+$zinc-50: #f0f1f3;
+$zinc: $zinc-550;
+
+// Slate
+$slate-950: #0e1118;
+$slate-900: #181c25;
+$slate-850: #202632;
+$slate-800: #2a3140;
+$slate-750: #333c4e;
+$slate-700: #3d475c;
+$slate-650: #48536b;
+$slate-600: #525f7a;
+$slate-550: #5d6b89;
+$slate-500: #687899;
+$slate-450: #7385a9;
+$slate-400: #8191b5;
+$slate-350: #909ebe;
+$slate-300: #a0acc7;
+$slate-250: #b0b9d0;
+$slate-200: #bfc7d9;
+$slate-150: #cfd5e2;
+$slate-100: #dfe3eb;
+$slate-50: #eff1f4;
+$slate: $slate-600;
+
+$colors: (
+  red: (
+    950: $red-950,
+    900: $red-900,
+    850: $red-850,
+    800: $red-800,
+    750: $red-750,
+    700: $red-700,
+    650: $red-650,
+    600: $red-600,
+    550: $red-550,
+    500: $red-500,
+    450: $red-450,
+    400: $red-400,
+    350: $red-350,
+    300: $red-300,
+    250: $red-250,
+    200: $red-200,
+    150: $red-150,
+    100: $red-100,
+    50: $red-50,
+    main: $red,
+  ),
+  pink: (
+    950: $pink-950,
+    900: $pink-900,
+    850: $pink-850,
+    800: $pink-800,
+    750: $pink-750,
+    700: $pink-700,
+    650: $pink-650,
+    600: $pink-600,
+    550: $pink-550,
+    500: $pink-500,
+    450: $pink-450,
+    400: $pink-400,
+    350: $pink-350,
+    300: $pink-300,
+    250: $pink-250,
+    200: $pink-200,
+    150: $pink-150,
+    100: $pink-100,
+    50: $pink-50,
+    main: $pink,
+  ),
+  fuchsia: (
+    950: $fuchsia-950,
+    900: $fuchsia-900,
+    850: $fuchsia-850,
+    800: $fuchsia-800,
+    750: $fuchsia-750,
+    700: $fuchsia-700,
+    650: $fuchsia-650,
+    600: $fuchsia-600,
+    550: $fuchsia-550,
+    500: $fuchsia-500,
+    450: $fuchsia-450,
+    400: $fuchsia-400,
+    350: $fuchsia-350,
+    300: $fuchsia-300,
+    250: $fuchsia-250,
+    200: $fuchsia-200,
+    150: $fuchsia-150,
+    100: $fuchsia-100,
+    50: $fuchsia-50,
+    main: $fuchsia,
+  ),
+  purple: (
+    950: $purple-950,
+    900: $purple-900,
+    850: $purple-850,
+    800: $purple-800,
+    750: $purple-750,
+    700: $purple-700,
+    650: $purple-650,
+    600: $purple-600,
+    550: $purple-550,
+    500: $purple-500,
+    450: $purple-450,
+    400: $purple-400,
+    350: $purple-350,
+    300: $purple-300,
+    250: $purple-250,
+    200: $purple-200,
+    150: $purple-150,
+    100: $purple-100,
+    50: $purple-50,
+    main: $purple,
+  ),
+  violet: (
+    950: $violet-950,
+    900: $violet-900,
+    850: $violet-850,
+    800: $violet-800,
+    750: $violet-750,
+    700: $violet-700,
+    650: $violet-650,
+    600: $violet-600,
+    550: $violet-550,
+    500: $violet-500,
+    450: $violet-450,
+    400: $violet-400,
+    350: $violet-350,
+    300: $violet-300,
+    250: $violet-250,
+    200: $violet-200,
+    150: $violet-150,
+    100: $violet-100,
+    50: $violet-50,
+    main: $violet,
+  ),
+  indigo: (
+    950: $indigo-950,
+    900: $indigo-900,
+    850: $indigo-850,
+    800: $indigo-800,
+    750: $indigo-750,
+    700: $indigo-700,
+    650: $indigo-650,
+    600: $indigo-600,
+    550: $indigo-550,
+    500: $indigo-500,
+    450: $indigo-450,
+    400: $indigo-400,
+    350: $indigo-350,
+    300: $indigo-300,
+    250: $indigo-250,
+    200: $indigo-200,
+    150: $indigo-150,
+    100: $indigo-100,
+    50: $indigo-50,
+    main: $indigo,
+  ),
+  blue: (
+    950: $blue-950,
+    900: $blue-900,
+    850: $blue-850,
+    800: $blue-800,
+    750: $blue-750,
+    700: $blue-700,
+    650: $blue-650,
+    600: $blue-600,
+    550: $blue-550,
+    500: $blue-500,
+    450: $blue-450,
+    400: $blue-400,
+    350: $blue-350,
+    300: $blue-300,
+    250: $blue-250,
+    200: $blue-200,
+    150: $blue-150,
+    100: $blue-100,
+    50: $blue-50,
+    main: $blue,
+  ),
+  azure: (
+    950: $azure-950,
+    900: $azure-900,
+    850: $azure-850,
+    800: $azure-800,
+    750: $azure-750,
+    700: $azure-700,
+    650: $azure-650,
+    600: $azure-600,
+    550: $azure-550,
+    500: $azure-500,
+    450: $azure-450,
+    400: $azure-400,
+    350: $azure-350,
+    300: $azure-300,
+    250: $azure-250,
+    200: $azure-200,
+    150: $azure-150,
+    100: $azure-100,
+    50: $azure-50,
+    main: $azure,
+  ),
+  cyan: (
+    950: $cyan-950,
+    900: $cyan-900,
+    850: $cyan-850,
+    800: $cyan-800,
+    750: $cyan-750,
+    700: $cyan-700,
+    650: $cyan-650,
+    600: $cyan-600,
+    550: $cyan-550,
+    500: $cyan-500,
+    450: $cyan-450,
+    400: $cyan-400,
+    350: $cyan-350,
+    300: $cyan-300,
+    250: $cyan-250,
+    200: $cyan-200,
+    150: $cyan-150,
+    100: $cyan-100,
+    50: $cyan-50,
+    main: $cyan,
+  ),
+  jade: (
+    950: $jade-950,
+    900: $jade-900,
+    850: $jade-850,
+    800: $jade-800,
+    750: $jade-750,
+    700: $jade-700,
+    650: $jade-650,
+    600: $jade-600,
+    550: $jade-550,
+    500: $jade-500,
+    450: $jade-450,
+    400: $jade-400,
+    350: $jade-350,
+    300: $jade-300,
+    250: $jade-250,
+    200: $jade-200,
+    150: $jade-150,
+    100: $jade-100,
+    50: $jade-50,
+    main: $jade,
+  ),
+  green: (
+    950: $green-950,
+    900: $green-900,
+    850: $green-850,
+    800: $green-800,
+    750: $green-750,
+    700: $green-700,
+    650: $green-650,
+    600: $green-600,
+    550: $green-550,
+    500: $green-500,
+    450: $green-450,
+    400: $green-400,
+    350: $green-350,
+    300: $green-300,
+    250: $green-250,
+    200: $green-200,
+    150: $green-150,
+    100: $green-100,
+    50: $green-50,
+    main: $green,
+  ),
+  lime: (
+    950: $lime-950,
+    900: $lime-900,
+    850: $lime-850,
+    800: $lime-800,
+    750: $lime-750,
+    700: $lime-700,
+    650: $lime-650,
+    600: $lime-600,
+    550: $lime-550,
+    500: $lime-500,
+    450: $lime-450,
+    400: $lime-400,
+    350: $lime-350,
+    300: $lime-300,
+    250: $lime-250,
+    200: $lime-200,
+    150: $lime-150,
+    100: $lime-100,
+    50: $lime-50,
+    main: $lime,
+  ),
+  yellow: (
+    950: $yellow-950,
+    900: $yellow-900,
+    850: $yellow-850,
+    800: $yellow-800,
+    750: $yellow-750,
+    700: $yellow-700,
+    650: $yellow-650,
+    600: $yellow-600,
+    550: $yellow-550,
+    500: $yellow-500,
+    450: $yellow-450,
+    400: $yellow-400,
+    350: $yellow-350,
+    300: $yellow-300,
+    250: $yellow-250,
+    200: $yellow-200,
+    150: $yellow-150,
+    100: $yellow-100,
+    50: $yellow-50,
+    main: $yellow,
+  ),
+  amber: (
+    950: $amber-950,
+    900: $amber-900,
+    850: $amber-850,
+    800: $amber-800,
+    750: $amber-750,
+    700: $amber-700,
+    650: $amber-650,
+    600: $amber-600,
+    550: $amber-550,
+    500: $amber-500,
+    450: $amber-450,
+    400: $amber-400,
+    350: $amber-350,
+    300: $amber-300,
+    250: $amber-250,
+    200: $amber-200,
+    150: $amber-150,
+    100: $amber-100,
+    50: $amber-50,
+    main: $amber,
+  ),
+  pumpkin: (
+    950: $pumpkin-950,
+    900: $pumpkin-900,
+    850: $pumpkin-850,
+    800: $pumpkin-800,
+    750: $pumpkin-750,
+    700: $pumpkin-700,
+    650: $pumpkin-650,
+    600: $pumpkin-600,
+    550: $pumpkin-550,
+    500: $pumpkin-500,
+    450: $pumpkin-450,
+    400: $pumpkin-400,
+    350: $pumpkin-350,
+    300: $pumpkin-300,
+    250: $pumpkin-250,
+    200: $pumpkin-200,
+    150: $pumpkin-150,
+    100: $pumpkin-100,
+    50: $pumpkin-50,
+    main: $pumpkin,
+  ),
+  orange: (
+    950: $orange-950,
+    900: $orange-900,
+    850: $orange-850,
+    800: $orange-800,
+    750: $orange-750,
+    700: $orange-700,
+    650: $orange-650,
+    600: $orange-600,
+    550: $orange-550,
+    500: $orange-500,
+    450: $orange-450,
+    400: $orange-400,
+    350: $orange-350,
+    300: $orange-300,
+    250: $orange-250,
+    200: $orange-200,
+    150: $orange-150,
+    100: $orange-100,
+    50: $orange-50,
+    main: $orange,
+  ),
+  sand: (
+    950: $sand-950,
+    900: $sand-900,
+    850: $sand-850,
+    800: $sand-800,
+    750: $sand-750,
+    700: $sand-700,
+    650: $sand-650,
+    600: $sand-600,
+    550: $sand-550,
+    500: $sand-500,
+    450: $sand-450,
+    400: $sand-400,
+    350: $sand-350,
+    300: $sand-300,
+    250: $sand-250,
+    200: $sand-200,
+    150: $sand-150,
+    100: $sand-100,
+    50: $sand-50,
+    main: $sand,
+  ),
+  grey: (
+    950: $grey-950,
+    900: $grey-900,
+    850: $grey-850,
+    800: $grey-800,
+    750: $grey-750,
+    700: $grey-700,
+    650: $grey-650,
+    600: $grey-600,
+    550: $grey-550,
+    500: $grey-500,
+    450: $grey-450,
+    400: $grey-400,
+    350: $grey-350,
+    300: $grey-300,
+    250: $grey-250,
+    200: $grey-200,
+    150: $grey-150,
+    100: $grey-100,
+    50: $grey-50,
+    main: $grey,
+  ),
+  zinc: (
+    950: $zinc-950,
+    900: $zinc-900,
+    850: $zinc-850,
+    800: $zinc-800,
+    750: $zinc-750,
+    700: $zinc-700,
+    650: $zinc-650,
+    600: $zinc-600,
+    550: $zinc-550,
+    500: $zinc-500,
+    450: $zinc-450,
+    400: $zinc-400,
+    350: $zinc-350,
+    300: $zinc-300,
+    250: $zinc-250,
+    200: $zinc-200,
+    150: $zinc-150,
+    100: $zinc-100,
+    50: $zinc-50,
+    main: $zinc,
+  ),
+  slate: (
+    950: $slate-950,
+    900: $slate-900,
+    850: $slate-850,
+    800: $slate-800,
+    750: $slate-750,
+    700: $slate-700,
+    650: $slate-650,
+    600: $slate-600,
+    550: $slate-550,
+    500: $slate-500,
+    450: $slate-450,
+    400: $slate-400,
+    350: $slate-350,
+    300: $slate-300,
+    250: $slate-250,
+    200: $slate-200,
+    150: $slate-150,
+    100: $slate-100,
+    50: $slate-50,
+    main: $slate,
+  ),
+);
diff --git a/colors/utilities/background-colors.scss b/colors/utilities/background-colors.scss
new file mode 100644
index 0000000..b8c9c2f
--- /dev/null
+++ b/colors/utilities/background-colors.scss
@@ -0,0 +1,73 @@
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+$enable-css-vars: map.get(settings.$utilities, "css-vars");
+$background-color-property-name: map.get(settings.$properties, "background-color");
+$color-property-name: map.get(settings.$properties, "color");
+$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+@mixin foreground-color($background-color) {
+  @if map.get(settings.$utilities, "color-for-background-colors") {
+    @if utils.foreground-brightness($background-color) == "light" {
+      @if $enable-css-vars {
+        color: var(#{$css-var-color-prefix}-light);
+      } @else {
+        color: utils.display-color(map.get(settings.$palette, "light-color"));
+      }
+    } @else {
+      @if $enable-css-vars {
+        color: var(#{$css-var-color-prefix}-dark);
+      } @else {
+        color: utils.display-color(map.get(settings.$palette, "dark-color"));
+      }
+    }
+  }
+}
+
+@mixin background-colors {
+  @if map.get(settings.$utilities, "background-colors") {
+    // Loop through color families
+    @each $family, $colors in colors.$colors {
+      @if index(map.get(settings.$palette, "color-families"), $family) {
+        $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+        $class-family-name: #{$background-color-property-name}-#{$family};
+
+        // Loop through colors
+        @each $shade, $color-value in $colors {
+          // Main color
+          @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+            $value: $color-value;
+            @if $enable-css-vars {
+              $value: var(#{$css-var-family-name});
+            } @else {
+              $value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name} {
+              background-color: $value;
+              @include foreground-color($color-value);
+            }
+          }
+
+          // Shades
+          @else if
+            index(map.get(settings.$palette, "shades"), $shade) and
+            map.get(settings.$palette, "enable-shades")
+          {
+            $value: $color-value;
+            @if $enable-css-vars {
+              $value: var(#{$css-var-family-name}-#{$shade});
+            } @else {
+              $value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
+              background-color: $value;
+              @include foreground-color($color-value);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/colors/utilities/colors.scss b/colors/utilities/colors.scss
new file mode 100644
index 0000000..ddbf795
--- /dev/null
+++ b/colors/utilities/colors.scss
@@ -0,0 +1,50 @@
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+@mixin colors {
+  @if map.get(settings.$utilities, "colors") {
+    $enable-css-vars: map.get(settings.$utilities, "css-vars");
+    $color-property-name: map.get(settings.$properties, "color");
+    $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+    // Loop through color families
+    @each $family, $colors in colors.$colors {
+      @if index(map.get(settings.$palette, "color-families"), $family) {
+        $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+        $class-family-name: #{$color-property-name}-#{$family};
+
+        // Loop through colors
+        @each $shade, $color-value in $colors {
+          // Main color
+          @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+            @if $enable-css-vars {
+              $color-value: var(#{$css-var-family-name});
+            } @else {
+              $color-value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name} {
+              color: $color-value;
+            }
+          }
+
+          // Shades
+          @else if
+            index(map.get(settings.$palette, "shades"), $shade) and
+            map.get(settings.$palette, "enable-shades")
+          {
+            @if $enable-css-vars {
+              $color-value: var(#{$css-var-family-name}-#{$shade});
+            } @else {
+              $color-value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
+              color: $color-value;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/colors/utilities/css-vars.scss b/colors/utilities/css-vars.scss
new file mode 100644
index 0000000..902e504
--- /dev/null
+++ b/colors/utilities/css-vars.scss
@@ -0,0 +1,53 @@
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+@mixin css-vars {
+  $enable-css-vars: map.get(settings.$utilities, "css-vars");
+  $color-property-name: map.get(settings.$properties, "color");
+  $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+  @if $enable-css-vars {
+    :root {
+      // Loop through color families
+      @each $family, $colors in colors.$colors {
+        @if index(map.get(settings.$palette, "color-families"), $family) {
+          $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+
+          // Loop through colors
+          @each $shade, $color-value in $colors {
+            // Main color
+            @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+              #{$css-var-family-name}: #{utils.display-color($color-value)};
+            }
+
+            // Shades
+            @else if
+              index(map.get(settings.$palette, "shades"), $shade) and
+              map.get(settings.$palette, "enable-shades")
+            {
+              #{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
+            }
+          }
+        }
+      }
+
+      // Black & white
+      @if map.get(settings.$palette, "enable-black-and-white") {
+        #{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
+        #{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
+      }
+
+      // Text color variables
+      @if map.get(settings.$utilities, "color-for-background-colors") {
+        #{$css-var-color-prefix}-light: #{utils.display-color(
+            map.get(settings.$palette, "light-color")
+          )};
+        #{$css-var-color-prefix}-dark: #{utils.display-color(
+            map.get(settings.$palette, "dark-color")
+          )};
+      }
+    }
+  }
+}
diff --git a/colors/utilities/index.scss b/colors/utilities/index.scss
new file mode 100644
index 0000000..7ad384b
--- /dev/null
+++ b/colors/utilities/index.scss
@@ -0,0 +1,8 @@
+@forward "settings";
+@use "css-vars" as *;
+@use "colors" as *;
+@use "background-colors" as *;
+
+@include css-vars;
+@include colors;
+@include background-colors;
diff --git a/colors/utilities/settings.scss b/colors/utilities/settings.scss
new file mode 100644
index 0000000..a352fe1
--- /dev/null
+++ b/colors/utilities/settings.scss
@@ -0,0 +1,108 @@
+@use "sass:map";
+@use "../../settings" as *;
+
+// Prefix for CSS variables
+$css-var-prefix: "--#{$prefix}" !default; // Must start with "--"
+$css-class-prefix: "#{$prefix}" !default;
+
+// Palette
+$palette: () !default;
+$palette: map.merge(
+  (
+    // Color families
+    "color-families":
+      (
+        red,
+        pink,
+        fuchsia,
+        purple,
+        violet,
+        indigo,
+        blue,
+        azure,
+        cyan,
+        jade,
+        green,
+        lime,
+        yellow,
+        amber,
+        pumpkin,
+        orange,
+        sand,
+        grey,
+        zinc,
+        slate
+      ),
+    // Shades
+    "shades":
+      (
+        50,
+        100,
+        150,
+        200,
+        250,
+        300,
+        350,
+        400,
+        450,
+        500,
+        550,
+        600,
+        650,
+        700,
+        750,
+        800,
+        850,
+        900,
+        950
+      ),
+    // Export main color for each family
+    "enable-main-color": true,
+
+    // Export shades for each family
+    "enable-shades": true,
+
+    // Export black and white
+    "enable-black-and-white": false,
+
+    // Light color used for dark backgrounds
+    "light-color": #fff,
+
+    // Dark color used for light backgrounds
+    "dark-color": #000,
+
+    // Export as HEX, RGB or HSL values
+    "export-as": "hex" // hex | rgb | hsl
+  ),
+  $palette
+);
+
+// Properties names used for CSS variables and classes
+// Useful if you want to shorten the names
+$properties: () !default;
+$properties: map.merge(
+  (
+    "color": "color",
+    "background-color": "background",
+  ),
+  $properties
+);
+
+// Utilities to export
+$utilities: () !default;
+$utilities: map.merge(
+  (
+    // CSS Vars
+    "css-vars": true,
+
+    // Colors utility classes
+    "colors": true,
+
+    // Background color utility classes
+    "background-colors": true,
+
+    // Color value for background color utility classes
+    "color-for-background-colors": true
+  ),
+  $utilities
+);
diff --git a/colors/utilities/utils.scss b/colors/utilities/utils.scss
new file mode 100644
index 0000000..5d0ddfe
--- /dev/null
+++ b/colors/utilities/utils.scss
@@ -0,0 +1,56 @@
+@use "sass:color";
+@use "sass:math";
+@use "sass:map";
+@use "settings";
+
+// Determines if the foreground needs to be light or dark
+// depending on the background color passed.
+// W3C reference: http://www.w3.org/TR/AERT#color-contrast
+// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
+@function foreground-brightness($background-color) {
+  $background-color-brightness: brightness($background-color);
+  $light-color-brightness: brightness(#ffffff);
+
+  @if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
+    @return "light";
+  } @else {
+    @return "dark";
+  }
+}
+
+// Calculates the color brightness
+// Color brightness is determined by the following formula:
+// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
+@function brightness($color) {
+  $color-brightness: round(
+    math.div(
+      (color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
+      1000
+    )
+  );
+
+  @return $color-brightness;
+}
+
+// Returns the color as RGB, HSL or HEX
+@function display-color($color) {
+  @if map.get(settings.$palette, "export-as") == "rgb" {
+    @return display-rgb($color);
+  }
+  @if map.get(settings.$palette, "export-as") == "hsl" {
+    @return display-hsl($color);
+  }
+  @return $color;
+}
+
+// Display color as HSL
+@function display-hsl($color) {
+  @return unquote(
+    "hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
+  );
+}
+
+// Display color as RGB
+@function display-rgb($color) {
+  @return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
+}
diff --git a/components/accordion.scss b/components/accordion.scss
new file mode 100644
index 0000000..28a0ad0
--- /dev/null
+++ b/components/accordion.scss
@@ -0,0 +1,116 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/accordion") {
+  /**
+   * Accordion (<details>)
+   */
+
+  #{$parent-selector} details {
+    display: block;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+
+    summary {
+      line-height: 1rem;
+      list-style-type: none;
+      cursor: pointer;
+
+      @if $enable-transitions {
+        transition: color var(#{$css-var-prefix}transition);
+      }
+
+      &:not([role]) {
+        color: var(#{$css-var-prefix}accordion-close-summary-color);
+      }
+
+      // Reset marker
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::marker {
+        display: none;
+      }
+
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+
+      // Marker
+      &::after {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
+        float: right;
+        transform: rotate(-90deg);
+        background-image: var(#{$css-var-prefix}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+
+        @if $enable-transitions {
+          transition: transform var(#{$css-var-prefix}transition);
+        }
+      }
+
+      &:focus {
+        outline: none;
+
+        &:not([role]) {
+          color: var(#{$css-var-prefix}accordion-active-summary-color);
+        }
+      }
+
+      &:focus-visible {
+        &:not([role]) {
+          outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
+          outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
+          color: var(#{$css-var-prefix}primary);
+        }
+      }
+
+      // Type button
+      &[role="button"] {
+        width: 100%;
+        text-align: left;
+
+        // Marker
+        &::after {
+          height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
+        }
+      }
+    }
+
+    // Open
+    &[open] {
+      > summary {
+        margin-bottom: var(#{$css-var-prefix}spacing);
+
+        &:not([role]) {
+          &:not(:focus) {
+            color: var(#{$css-var-prefix}accordion-open-summary-color);
+          }
+        }
+
+        &::after {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} details {
+      summary {
+        text-align: right;
+
+        &::after {
+          float: left;
+          background-position: left center;
+        }
+      }
+    }
+  }
+}
diff --git a/components/card.scss b/components/card.scss
new file mode 100644
index 0000000..19d8358
--- /dev/null
+++ b/components/card.scss
@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/card") {
+  /**
+   * Card (<article>)
+   */
+
+  #{$parent-selector} article {
+    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+    padding: var(#{$css-var-prefix}block-spacing-vertical)
+      var(#{$css-var-prefix}block-spacing-horizontal);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}card-background-color);
+    box-shadow: var(#{$css-var-prefix}card-box-shadow);
+
+    > header,
+    > footer {
+      margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
+        var(#{$css-var-prefix}block-spacing-horizontal);
+      background-color: var(#{$css-var-prefix}card-sectioning-background-color);
+    }
+
+    > header {
+      margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+      border-bottom: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}card-border-color);
+      border-top-right-radius: var(#{$css-var-prefix}border-radius);
+      border-top-left-radius: var(#{$css-var-prefix}border-radius);
+    }
+
+    > footer {
+      margin-top: var(#{$css-var-prefix}block-spacing-vertical);
+      margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      border-top: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}card-border-color);
+      border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
+      border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
+    }
+  }
+}
diff --git a/components/dropdown.scss b/components/dropdown.scss
new file mode 100644
index 0000000..95eb0d0
--- /dev/null
+++ b/components/dropdown.scss
@@ -0,0 +1,280 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/dropdown") and $enable-classes {
+  /**
+   * Dropdown (details.dropdown)
+   */
+
+  // Container
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown {
+    position: relative;
+    border-bottom: none;
+
+    // Marker
+    // ––––––––––––––––––––
+    summary,
+    > button,
+    > a {
+      &::after {
+        display: block;
+        width: 1rem;
+        height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
+        margin-inline-start: 0.25rem;
+        float: right;
+        // TODO: find out why we need this magic number (0.2 rem)
+        // for the marker to be aligned with the regular select
+        transform: rotate(0deg) translateX(0.2rem);
+        background-image: var(#{$css-var-prefix}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+      }
+    }
+  }
+
+  // Container type accordion
+  // inside a nav
+  // ––––––––––––––––––––
+  #{$parent-selector} nav details.dropdown {
+    // Override height
+    margin-bottom: 0;
+  }
+
+  // Bouton as a select
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown summary:not([role]) {
+    height: calc(
+      1rem *
+        var(#{$css-var-prefix}line-height) +
+        var(#{$css-var-prefix}form-element-spacing-vertical) *
+        2 +
+        var(#{$css-var-prefix}border-width) *
+        2
+    );
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+    border: var(#{$css-var-prefix}border-width)
+      solid
+      var(#{$css-var-prefix}form-element-border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}form-element-background-color);
+    color: var(#{$css-var-prefix}form-element-placeholder-color);
+    line-height: inherit;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:active,
+    &:focus {
+      border-color: var(#{$css-var-prefix}form-element-active-border-color);
+      background-color: var(#{$css-var-prefix}form-element-active-background-color);
+    }
+
+    &:focus {
+      box-shadow: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}form-element-focus-color);
+    }
+
+    // Reset focus visible from accordion component
+    &:focus-visible {
+      outline: none;
+    }
+
+    // Aria-invalid
+    &[aria-invalid="false"] {
+      #{$css-var-prefix}form-element-border-color: var(
+        #{$css-var-prefix}form-element-valid-border-color
+      );
+      #{$css-var-prefix}form-element-active-border-color: var(
+        #{$css-var-prefix}form-element-valid-focus-color
+      );
+      #{$css-var-prefix}form-element-focus-color: var(
+        #{$css-var-prefix}form-element-valid-focus-color
+      );
+    }
+
+    &[aria-invalid="true"] {
+      #{$css-var-prefix}form-element-border-color: var(
+        #{$css-var-prefix}form-element-invalid-border-color
+      );
+      #{$css-var-prefix}form-element-active-border-color: var(
+        #{$css-var-prefix}form-element-invalid-focus-color
+      );
+      #{$css-var-prefix}form-element-focus-color: var(
+        #{$css-var-prefix}form-element-invalid-focus-color
+      );
+    }
+  }
+
+  // Dropdown inside a nav
+  // ––––––––––––––––––––
+  #{$parent-selector} nav details.dropdown {
+    display: inline;
+    margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
+
+    summary {
+      &::after {
+        transform: rotate(0deg) translateX(0rem);
+      }
+
+      &:not([role]) {
+        // Override height
+        height: calc(
+          (1rem * var(#{$css-var-prefix}line-height)) +
+            (var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
+        );
+        padding: calc(
+            var(#{$css-var-prefix}nav-link-spacing-vertical) -
+              (var(#{$css-var-prefix}border-width) * 2)
+          )
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+
+        &:focus-visible {
+          box-shadow: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}primary-focus);
+        }
+      }
+    }
+  }
+
+  // Submenu
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown summary + ul {
+    display: flex;
+    z-index: 99;
+    position: absolute;
+    left: 0;
+    flex-direction: column;
+    width: 100%;
+    min-width: fit-content;
+    margin: 0;
+    margin-top: var(#{$css-var-prefix}outline-width);
+    padding: 0;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}dropdown-background-color);
+    box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
+    color: var(#{$css-var-prefix}dropdown-color);
+    white-space: nowrap;
+    opacity: 0;
+
+    @if $enable-transitions {
+      transition:
+        opacity var(#{$css-var-prefix}transition),
+        transform 0s ease-in-out 1s;
+    }
+
+    &[dir="rtl"] {
+      right: 0;
+      left: auto;
+    }
+
+    li {
+      width: 100%;
+      margin-bottom: 0;
+      padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}form-element-spacing-horizontal);
+      list-style: none;
+
+      &:first-of-type {
+        margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+      }
+
+      &:last-of-type {
+        margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+      }
+
+      a {
+        display: block;
+        margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
+          calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
+        padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+          var(#{$css-var-prefix}form-element-spacing-horizontal);
+        overflow: hidden;
+        border-radius: 0;
+        color: var(#{$css-var-prefix}dropdown-color);
+        text-decoration: none;
+        text-overflow: ellipsis;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &:focus-visible,
+        &[aria-current]:not([aria-current="false"]) {
+          background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
+        }
+      }
+
+      label {
+        width: 100%;
+      }
+
+      // Not working in Firefox, which doesn't support the `:has()` pseudo-class
+      &:has(label):hover {
+        background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
+      }
+    }
+  }
+
+  // Button opened
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown[open] summary {
+    margin-bottom: 0;
+  }
+
+  // Menu opened
+  // ––––––––––––––––––––
+  // 1. Inside container type accordion
+  #{$parent-selector} details.dropdown[open] summary {
+    + ul {
+      transform: scaleY(1);
+      opacity: 1;
+
+      @if $enable-transitions {
+        transition:
+          opacity var(#{$css-var-prefix}transition),
+          transform 0s ease-in-out 0s;
+      }
+    }
+  }
+
+  // Close for dropdown
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown[open] summary {
+    &::before {
+      display: block;
+      z-index: 1;
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      inset: 0;
+      background: none;
+      content: "";
+      cursor: default;
+    }
+  }
+  // Label
+  // ––––––––––––––––––––
+  #{$parent-selector} label > details.dropdown {
+    margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+  }
+}
diff --git a/components/group.scss b/components/group.scss
new file mode 100644
index 0000000..8b2631b
--- /dev/null
+++ b/components/group.scss
@@ -0,0 +1,120 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/group") {
+  /**
+   * Group ([role="group"], [role="search"])
+   */
+
+  #{$parent-selector} [role="search"],
+  #{$parent-selector} [role="group"] {
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    vertical-align: middle;
+    transition: box-shadow var(#{$css-var-prefix}transition);
+
+    > *,
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      position: relative;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+
+      &:not(:first-child) {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:focus {
+        z-index: 2;
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"],
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      &:not(:first-child) {
+        margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"] {
+      width: auto;
+    }
+
+    @supports selector(:has(*)) {
+      // Group box shadow when a button is focused
+      &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+        #{$css-var-prefix}group-box-shadow: var(
+          #{$css-var-prefix}group-box-shadow-focus-with-button
+        );
+
+        input:not([type="checkbox"], [type="radio"]),
+        select {
+          border-color: transparent;
+        }
+      }
+
+      // Group box shadow when an input is focused
+      &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+        #{$css-var-prefix}group-box-shadow: var(
+          #{$css-var-prefix}group-box-shadow-focus-with-input
+        );
+
+        // Adapt box shadow for buttons
+        button,
+        [type="submit"],
+        [type="button"],
+        [role="button"] {
+          #{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
+            var(#{$css-var-prefix}primary-border);
+          #{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
+            var(#{$css-var-prefix}primary-hover-border);
+        }
+      }
+
+      // Remove button box shadow if we have a group box shadow
+      button,
+      [type="submit"],
+      [type="reset"],
+      [type="button"],
+      [role="button"] {
+        &:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  #{$parent-selector} [role="search"] {
+    > * {
+      &:first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+      }
+    }
+  }
+}
diff --git a/components/loading.scss b/components/loading.scss
new file mode 100644
index 0000000..37c79e2
--- /dev/null
+++ b/components/loading.scss
@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/loading") {
+  /**
+   * Loading ([aria-busy=true])
+   */
+
+  // Everything except form elements
+  #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
+    white-space: nowrap;
+
+    &::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      background-image: var(#{$css-var-prefix}icon-loading);
+      background-size: 1em auto;
+      background-repeat: no-repeat;
+      content: "";
+      vertical-align: -0.125em; // Visual alignment
+    }
+
+    &:not(:empty) {
+      &::before {
+        margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
+      }
+    }
+
+    &:empty {
+      text-align: center;
+    }
+  }
+
+  // Buttons and links
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [role="button"],
+  #{$parent-selector} a {
+    &[aria-busy="true"] {
+      pointer-events: none;
+    }
+  }
+}
diff --git a/components/modal.scss b/components/modal.scss
new file mode 100644
index 0000000..9ed05b6
--- /dev/null
+++ b/components/modal.scss
@@ -0,0 +1,176 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/modal") {
+  /**
+   * Modal (<dialog>)
+   */
+
+  :root {
+    #{$css-var-prefix}scrollbar-width: 0px;
+  }
+
+  #{$parent-selector} dialog {
+    display: flex;
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    min-width: 100%;
+    height: inherit;
+    min-height: 100%;
+    padding: 0;
+    border: 0;
+    backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
+    background-color: var(#{$css-var-prefix}modal-overlay-background-color);
+    color: var(#{$css-var-prefix}color);
+
+    // Content
+    article {
+      $close-selector: if(
+        $enable-classes,
+        ".close, :is(a, button)[rel=prev]",
+        ":is(a, button)[rel=prev]"
+      );
+      width: 100%;
+      max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
+      margin: var(#{$css-var-prefix}spacing);
+      overflow: auto;
+
+      @if map.get($breakpoints, "sm") {
+        @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "sm"), "viewport");
+        }
+      }
+
+      @if map.get($breakpoints, "md") {
+        @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "md"), "viewport");
+        }
+      }
+
+      > header {
+        > * {
+          margin-bottom: 0;
+        }
+
+        #{$close-selector} {
+          margin: 0;
+          margin-left: var(#{$css-var-prefix}spacing);
+          padding: 0;
+          float: right;
+        }
+      }
+
+      > footer {
+        text-align: right;
+
+        button,
+        [role="button"] {
+          margin-bottom: 0;
+
+          &:not(:first-of-type) {
+            margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
+          }
+        }
+      }
+
+      // Close icon
+      #{$close-selector} {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
+        margin-bottom: var(#{$css-var-prefix}spacing);
+        margin-left: auto;
+        border: none;
+        background-image: var(#{$css-var-prefix}icon-close);
+        background-position: center;
+        background-size: auto 1rem;
+        background-repeat: no-repeat;
+        background-color: transparent;
+        opacity: 0.5;
+
+        @if $enable-transitions {
+          transition: opacity var(#{$css-var-prefix}transition);
+        }
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          opacity: 1;
+        }
+      }
+    }
+
+    // Closed state
+    &:not([open]),
+    &[open="false"] {
+      display: none;
+    }
+  }
+
+  // Utilities
+  @if $enable-classes {
+    .modal-is-open {
+      padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
+      overflow: hidden;
+      pointer-events: none;
+      touch-action: none;
+
+      dialog {
+        pointer-events: auto;
+        touch-action: auto;
+      }
+    }
+  }
+
+  // Animations
+  @if $enable-classes and $enable-transitions {
+    $animation-duration: 0.2s;
+
+    :where(.modal-is-opening, .modal-is-closing) {
+      dialog,
+      dialog > article {
+        animation-duration: $animation-duration;
+        animation-timing-function: ease-in-out;
+        animation-fill-mode: both;
+      }
+
+      dialog {
+        animation-duration: ($animation-duration * 4);
+        animation-name: modal-overlay;
+
+        > article {
+          animation-delay: $animation-duration;
+          animation-name: modal;
+        }
+      }
+    }
+
+    .modal-is-closing {
+      dialog,
+      dialog > article {
+        animation-delay: 0s;
+        animation-direction: reverse;
+      }
+    }
+
+    @keyframes modal-overlay {
+      from {
+        backdrop-filter: none;
+        background-color: transparent;
+      }
+    }
+
+    @keyframes modal {
+      from {
+        transform: translateY(-100%);
+        opacity: 0;
+      }
+    }
+  }
+}
diff --git a/components/nav.scss b/components/nav.scss
new file mode 100644
index 0000000..b90e1da
--- /dev/null
+++ b/components/nav.scss
@@ -0,0 +1,160 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/nav") {
+  /**
+   * Nav
+   */
+
+  // Reboot based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+
+  // Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+  :where(nav li)::before {
+    float: left;
+    content: "\200B";
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  #{$parent-selector} nav,
+  #{$parent-selector} nav ul {
+    display: flex;
+  }
+
+  #{$parent-selector} nav {
+    justify-content: space-between;
+    overflow: visible;
+
+    ol,
+    ul {
+      align-items: center;
+      margin-bottom: 0;
+      padding: 0;
+      list-style: none;
+
+      &:first-of-type {
+        margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+      }
+      &:last-of-type {
+        margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+      }
+    }
+
+    li {
+      display: inline-block;
+      margin: 0;
+      padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
+        var(#{$css-var-prefix}nav-element-spacing-horizontal);
+
+      :where(a, [role="link"]) {
+        display: inline-block;
+        margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
+          calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+        padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+        border-radius: var(#{$css-var-prefix}border-radius);
+
+        &:not(:hover) {
+          text-decoration: none;
+        }
+      }
+
+      // Minimal support for buttons and forms elements
+      button,
+      [role="button"],
+      [type="button"],
+      input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+      select {
+        height: auto;
+        margin-right: inherit;
+        margin-bottom: 0;
+        margin-left: inherit;
+        padding: calc(
+            var(#{$css-var-prefix}nav-link-spacing-vertical) -
+              (var(#{$css-var-prefix}border-width) * 2)
+          )
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+      }
+    }
+
+    // Breadcrumb
+    &[aria-label="breadcrumb"] {
+      align-items: center;
+      justify-content: start;
+
+      & ul li {
+        &:not(:first-child) {
+          margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
+        }
+
+        a {
+          margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
+          margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+        }
+
+        &:not(:last-child) {
+          &::after {
+            display: inline-block;
+            position: absolute;
+            width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
+            margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+            content: var(#{$css-var-prefix}nav-breadcrumb-divider);
+            color: var(#{$css-var-prefix}muted-color);
+            text-align: center;
+            text-decoration: none;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      // Minimal support for aria-current
+      & a[aria-current]:not([aria-current="false"]) {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: none;
+        pointer-events: none;
+      }
+    }
+  }
+
+  // Vertical Nav
+  #{$parent-selector} aside {
+    nav,
+    ol,
+    ul,
+    li {
+      display: block;
+    }
+
+    li {
+      padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}nav-element-spacing-horizontal);
+
+      a {
+        display: block;
+      }
+
+      // Minimal support for links as buttons
+      [role="button"] {
+        margin: inherit;
+      }
+    }
+  }
+
+  // Breadcrumb RTL
+  [dir="rtl"] {
+    #{$parent-selector} nav {
+      &[aria-label="breadcrumb"] {
+        & ul li {
+          &:not(:last-child) {
+            ::after {
+              content: "\\";
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/progress.scss b/components/progress.scss
new file mode 100644
index 0000000..a6da714
--- /dev/null
+++ b/components/progress.scss
@@ -0,0 +1,102 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/progress") {
+  /**
+   * Progress
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Add the correct display in Edge 18- and IE
+  // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
+  #{$parent-selector} progress {
+    display: inline-block; // 1
+    vertical-align: baseline; // 2
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  #{$parent-selector} progress {
+    // Reset the default appearance
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    // Styles
+    display: inline-block;
+    appearance: none;
+    width: 100%;
+    height: 0.5rem;
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+    overflow: hidden;
+
+    // Remove Firefox and Opera border
+    border: 0;
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}progress-background-color);
+
+    // IE10 uses `color` to set the bar background-color
+    color: var(#{$css-var-prefix}progress-color);
+
+    &::-webkit-progress-bar {
+      border-radius: var(#{$css-var-prefix}border-radius);
+      background: none;
+    }
+
+    &[value]::-webkit-progress-value {
+      background-color: var(#{$css-var-prefix}progress-color);
+
+      @if $enable-transitions {
+        transition: inline-size var(#{$css-var-prefix}transition);
+      }
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(#{$css-var-prefix}progress-color);
+    }
+
+    // Indeterminate state
+    @media (prefers-reduced-motion: no-preference) {
+      &:indeterminate {
+        background: var(#{$css-var-prefix}progress-background-color)
+          linear-gradient(
+            to right,
+            var(#{$css-var-prefix}progress-color) 30%,
+            var(#{$css-var-prefix}progress-background-color) 30%
+          )
+          top left / 150% 150% no-repeat;
+        animation: progress-indeterminate 1s linear infinite;
+
+        &[value]::-webkit-progress-value {
+          background-color: transparent;
+        }
+
+        &::-moz-progress-bar {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    @media (prefers-reduced-motion: no-preference) {
+      #{$parent-selector} progress:indeterminate {
+        animation-direction: reverse;
+      }
+    }
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}
diff --git a/components/tooltip.scss b/components/tooltip.scss
new file mode 100644
index 0000000..2076438
--- /dev/null
+++ b/components/tooltip.scss
@@ -0,0 +1,215 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/tooltip") {
+  /**
+   * Tooltip ([data-tooltip])
+   */
+
+  #{$parent-selector} [data-tooltip] {
+    position: relative;
+
+    &:not(a, button, input) {
+      border-bottom: 1px dotted;
+      text-decoration: none;
+      cursor: help;
+    }
+
+    &[data-placement="top"]::before,
+    &[data-placement="top"]::after,
+    &::before,
+    &::after {
+      display: block;
+      z-index: 99;
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      padding: 0.25rem 0.5rem;
+      overflow: hidden;
+      transform: translate(-50%, -0.25rem);
+      border-radius: var(#{$css-var-prefix}border-radius);
+      background: var(#{$css-var-prefix}tooltip-background-color);
+      content: attr(data-tooltip);
+      color: var(#{$css-var-prefix}tooltip-color);
+      font-style: normal;
+      font-weight: var(#{$css-var-prefix}font-weight);
+      font-size: 0.875rem;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    // Caret
+    &[data-placement="top"]::after,
+    &::after {
+      padding: 0;
+      transform: translate(-50%, 0rem);
+      border-top: 0.3rem solid;
+      border-right: 0.3rem solid transparent;
+      border-left: 0.3rem solid transparent;
+      border-radius: 0;
+      background-color: transparent;
+      content: "";
+      color: var(#{$css-var-prefix}tooltip-background-color);
+    }
+
+    &[data-placement="bottom"] {
+      &::before,
+      &::after {
+        top: 100%;
+        bottom: auto;
+        transform: translate(-50%, 0.25rem);
+      }
+
+      &:after {
+        transform: translate(-50%, -0.3rem);
+        border: 0.3rem solid transparent;
+        border-bottom: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="left"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: 100%;
+        bottom: auto;
+        left: auto;
+        transform: translate(-0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-left: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="right"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 100%;
+        transform: translate(0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(-0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-right: 0.3rem solid;
+      }
+    }
+
+    // Display
+    &:focus,
+    &:hover {
+      &::before,
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    @if $enable-transitions {
+      // Animations, excluding touch devices
+      @media (hover: hover) and (pointer: fine) {
+        // Default (top)
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            #{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
+            transform: translate(-50%, 0.75rem);
+            animation-duration: 0.2s;
+            animation-fill-mode: forwards;
+            animation-name: tooltip-slide;
+            opacity: 0;
+          }
+
+          &::after {
+            #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
+            transform: translate(-50%, -0.25rem);
+            animation-name: tooltip-caret-slide;
+          }
+        }
+
+        // Bottom
+        &[data-placement="bottom"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
+              transform: translate(-50%, -0.75rem);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
+              transform: translate(-50%, -0.5rem);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+
+        // Left
+        &[data-placement="left"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
+              transform: translate(0.75rem, -50%);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
+              transform: translate(0.05rem, -50%);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+
+        // Right
+        &[data-placement="right"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
+              transform: translate(-0.75rem, -50%);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
+              transform: translate(-0.05rem, -50%);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+      }
+
+      @keyframes tooltip-slide {
+        to {
+          transform: var(#{$css-var-prefix}tooltip-slide-to);
+          opacity: 1;
+        }
+      }
+
+      @keyframes tooltip-caret-slide {
+        50% {
+          opacity: 0;
+        }
+        to {
+          transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
diff --git a/content/button.scss b/content/button.scss
new file mode 100644
index 0000000..64ac72a
--- /dev/null
+++ b/content/button.scss
@@ -0,0 +1,209 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/button") {
+  /**
+   * Button
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Change the font styles in all browsers
+  // 2. Remove the margin on controls in Safari
+  // 3. Show the overflow in Edge
+  #{$parent-selector} button {
+    margin: 0; // 2
+    overflow: visible; // 3
+    font-family: inherit; // 1
+    text-transform: none; // 1
+  }
+
+  // Correct the inability to style buttons in iOS and Safari
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    -webkit-appearance: button;
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="file"]::file-selector-button,
+  #{$parent-selector} [role="button"] {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    #{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color);
+    box-shadow: var(#{$css-var-prefix}box-shadow);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: 1rem;
+    line-height: var(#{$css-var-prefix}line-height);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:is([aria-current]:not([aria-current="false"])),
+    &:is(:hover, :active, :focus) {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
+      #{$css-var-prefix}box-shadow: var(
+        #{$css-var-prefix}button-hover-box-shadow,
+        0 0 0 rgba(0, 0, 0, 0)
+      );
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      #{$css-var-prefix}box-shadow:
+        var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    margin-bottom: var(#{$css-var-prefix}spacing);
+  }
+
+  // .secondary, .contrast & .outline
+  @if $enable-classes {
+    // Secondary
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+
+    // Contrast
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
+      }
+    }
+
+    // Outline (primary)
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
+    [type="reset"].outline {
+      #{$css-var-prefix}background-color: transparent;
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: transparent;
+        #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
+      }
+    }
+
+    // Outline (secondary)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
+    [type="reset"].outline {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
+      }
+    }
+
+    // Outline (contrast)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
+      }
+    }
+  } @else {
+    // Secondary button without .class
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+  }
+
+  // Button [disabled]
+  #{$parent-selector}
+    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
+  #{$parent-selector}
+    :where(fieldset[disabled])
+    :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
diff --git a/content/code.scss b/content/code.scss
new file mode 100644
index 0000000..0d12877
--- /dev/null
+++ b/content/code.scss
@@ -0,0 +1,73 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/code") {
+  /**
+   * Code
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance and scaling of font size in all browsers
+  // 2. Correct the odd `em` font sizing in all browsers
+  #{$parent-selector} pre,
+  #{$parent-selector} code,
+  #{$parent-selector} kbd,
+  #{$parent-selector} samp {
+    font-size: 0.875em; // 2
+    font-family: var(#{$css-var-prefix}font-family); // 1
+  }
+
+  #{$parent-selector} pre code {
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  // Prevent overflow of the container in all browsers (opinionated)
+  #{$parent-selector} pre {
+    -ms-overflow-style: scrollbar;
+    overflow: auto;
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  #{$parent-selector} pre,
+  #{$parent-selector} code,
+  #{$parent-selector} kbd {
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}code-background-color);
+    color: var(#{$css-var-prefix}code-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    line-height: initial;
+  }
+
+  #{$parent-selector} code,
+  #{$parent-selector} kbd {
+    display: inline-block;
+    padding: 0.375rem;
+  }
+
+  #{$parent-selector} pre {
+    display: block;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    overflow-x: auto;
+
+    > code {
+      display: block;
+      padding: var(#{$css-var-prefix}spacing);
+      background: none;
+      line-height: var(#{$css-var-prefix}line-height);
+    }
+  }
+
+  // kbd
+  #{$parent-selector} kbd {
+    background-color: var(#{$css-var-prefix}code-kbd-background-color);
+    color: var(#{$css-var-prefix}code-kbd-color);
+    vertical-align: baseline;
+  }
+}
diff --git a/content/embedded.scss b/content/embedded.scss
new file mode 100644
index 0000000..354a4c4
--- /dev/null
+++ b/content/embedded.scss
@@ -0,0 +1,53 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/embedded") {
+  /**
+   * Embedded content
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Change the alignment on media elements in all browsers (opinionated)
+  #{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
+    vertical-align: middle;
+  }
+
+  // Add the correct display in IE 9-
+  #{$parent-selector} audio,
+  #{$parent-selector} video {
+    display: inline-block;
+  }
+
+  // Add the correct display in iOS 4-7
+  #{$parent-selector} audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+
+  // Remove the border on iframes in all browsers (opinionated)
+  #{$parent-selector} :where(iframe) {
+    border-style: none;
+  }
+
+  // 1. Remove the border on images inside links in IE 10.
+  // 2. Responsive by default
+  #{$parent-selector} img {
+    max-width: 100%; // 2
+    height: auto; // 2
+    border-style: none; // 1
+  }
+
+  // Change the fill color to match the text color in all browsers (opinionated)
+  #{$parent-selector} :where(svg:not([fill])) {
+    fill: currentColor;
+  }
+
+  // Hide the overflow in IE
+  #{$parent-selector} svg:not(:root) {
+    overflow: hidden;
+  }
+}
diff --git a/content/figure.scss b/content/figure.scss
new file mode 100644
index 0000000..d479f1f
--- /dev/null
+++ b/content/figure.scss
@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/figure") {
+  /**
+   * Figure
+   */
+
+  #{$parent-selector} figure {
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    figcaption {
+      padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
+      color: var(#{$css-var-prefix}muted-color);
+    }
+  }
+}
diff --git a/content/link.scss b/content/link.scss
new file mode 100644
index 0000000..1e33115
--- /dev/null
+++ b/content/link.scss
@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/link") {
+  /**
+   * Link
+   */
+
+  #{$parent-selector} :where(a:not([role="button"])),
+  #{$parent-selector} [role="link"] {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
+    #{$css-var-prefix}background-color: transparent;
+    #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color); // 1
+    color: var(#{$css-var-prefix}color);
+    text-decoration: var(#{$css-var-prefix}text-decoration);
+    text-decoration-color: var(#{$css-var-prefix}underline);
+    text-underline-offset: 0.125em;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        text-decoration var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
+      #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
+      #{$css-var-prefix}text-decoration: underline;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    }
+
+    @if $enable-classes {
+      // Secondary
+      &.secondary {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
+        #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
+          #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
+        }
+      }
+
+      // Contrast
+      &.contrast {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
+        #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
+          #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
+        }
+      }
+    }
+  }
+
+  #{$parent-selector} a {
+    &[role="button"] {
+      display: inline-block;
+    }
+  }
+}
diff --git a/content/other.scss b/content/other.scss
new file mode 100644
index 0000000..cf6de13
--- /dev/null
+++ b/content/other.scss
@@ -0,0 +1,38 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/miscs") {
+  /**
+   * Miscs
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance of border color in Firefox
+  // 2. Add the correct box sizing in Firefox
+  #{$parent-selector} hr {
+    height: 0; // 2
+    margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
+    border: 0;
+    border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
+    color: inherit; // 1
+  }
+
+  // Add the correct display in IE 10+
+  #{$parent-selector} [hidden],
+  #{$parent-selector} template {
+    @if $enable-important {
+      display: none !important;
+    } @else {
+      display: none;
+    }
+  }
+
+  // Add the correct display in IE 9-
+  #{$parent-selector} canvas {
+    display: inline-block;
+  }
+}
diff --git a/content/table.scss b/content/table.scss
new file mode 100644
index 0000000..8ba04ce
--- /dev/null
+++ b/content/table.scss
@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/table") {
+  /**
+   * Table
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Collapse border spacing in all browsers (opinionated)
+  // 2. Remove text indentation from table contents in Chrome, Edge, and Safari
+  #{$parent-selector} :where(table) {
+    width: 100%;
+    border-collapse: collapse; // 1
+    border-spacing: 0;
+    text-indent: 0; // 2
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  // Cells
+  #{$parent-selector} th,
+  #{$parent-selector} td {
+    padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
+    border-bottom: var(#{$css-var-prefix}border-width)
+      solid
+      var(#{$css-var-prefix}table-border-color);
+    background-color: var(#{$css-var-prefix}background-color);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    text-align: left;
+    text-align: start;
+  }
+
+  // Footer
+  #{$parent-selector} tfoot {
+    th,
+    td {
+      border-top: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}table-border-color);
+      border-bottom: 0;
+    }
+  }
+
+  // Striped
+  @if enable-classes {
+    #{$parent-selector} table {
+      &.striped {
+        tbody tr:nth-child(odd) th,
+        tbody tr:nth-child(odd) td {
+          background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
+        }
+      }
+    }
+  }
+}
diff --git a/content/typography.scss b/content/typography.scss
new file mode 100644
index 0000000..feb5372
--- /dev/null
+++ b/content/typography.scss
@@ -0,0 +1,182 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/typography") {
+  /**
+   * Typography
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Add the correct font weight in Chrome, Edge, and Safari
+  #{$parent-selector} b,
+  #{$parent-selector} strong {
+    font-weight: bolder;
+  }
+
+  // Prevent `sub` and `sup` elements from affecting the line height in all browsers
+  #{$parent-selector} sub,
+  #{$parent-selector} sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+  #{$parent-selector} sub {
+    bottom: -0.25em;
+  }
+  #{$parent-selector} sup {
+    top: -0.5em;
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  #{$parent-selector} address,
+  #{$parent-selector} blockquote,
+  #{$parent-selector} dl,
+  #{$parent-selector} ol,
+  #{$parent-selector} p,
+  #{$parent-selector} pre,
+  #{$parent-selector} table,
+  #{$parent-selector} ul {
+    margin-top: 0;
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    color: var(#{$css-var-prefix}color);
+    font-style: normal;
+    font-weight: var(#{$css-var-prefix}font-weight);
+  }
+
+  // Headings
+  #{$parent-selector} h1,
+  #{$parent-selector} h2,
+  #{$parent-selector} h3,
+  #{$parent-selector} h4,
+  #{$parent-selector} h5,
+  #{$parent-selector} h6 {
+    margin-top: 0;
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: var(#{$css-var-prefix}font-size);
+    line-height: var(#{$css-var-prefix}line-height);
+    font-family: var(#{$css-var-prefix}font-family);
+  }
+
+  #{$parent-selector} h1 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
+  }
+  #{$parent-selector} h2 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
+  }
+  #{$parent-selector} h3 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
+  }
+  #{$parent-selector} h4 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
+  }
+  #{$parent-selector} h5 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
+  }
+  #{$parent-selector} h6 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
+  }
+
+  // Margin-top for headings after a block
+  #{$parent-selector}
+    :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
+    ~ :is(h1, h2, h3, h4, h5, h6) {
+      margin-top: var(#{$css-var-prefix}typography-spacing-top);
+    }
+  }
+
+  // Paragraphs
+  #{$parent-selector} p {
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+  }
+
+  // Heading group
+  #{$parent-selector} hgroup {
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+
+    > * {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    > *:not(:first-child):last-child {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
+      #{$css-var-prefix}font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+
+  // Lists
+  #{$parent-selector} :where(ol, ul) {
+    li {
+      margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+    }
+  }
+
+  // Margin-top for nested lists
+  // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
+  #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
+    margin: 0; // 1
+    margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+  }
+
+  #{$parent-selector} ul li {
+    list-style: square;
+  }
+
+  // Highlighted text
+  #{$parent-selector} mark {
+    padding: 0.125rem 0.25rem;
+    background-color: var(#{$css-var-prefix}mark-background-color);
+    color: var(#{$css-var-prefix}mark-color);
+    vertical-align: baseline;
+  }
+
+  // Blockquote
+  #{$parent-selector} blockquote {
+    display: block;
+    margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
+    padding: var(#{$css-var-prefix}spacing);
+    border-right: none;
+    border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-end: none;
+
+    footer {
+      margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
+      color: var(#{$css-var-prefix}blockquote-footer-color);
+    }
+  }
+
+  // Abbreviations
+  // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+  #{$parent-selector} abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none; // 1
+    cursor: help;
+  }
+
+  // Ins
+  #{$parent-selector} ins {
+    color: var(#{$css-var-prefix}ins-color);
+    text-decoration: none;
+  }
+
+  // del
+  #{$parent-selector} del {
+    color: var(#{$css-var-prefix}del-color);
+  }
+
+  // selection
+  #{$parent-selector} ::selection {
+    background-color: var(#{$css-var-prefix}text-selection-color);
+  }
+}
diff --git a/includes/enqueue.php b/enqueue.php
similarity index 100%
rename from includes/enqueue.php
rename to enqueue.php
diff --git a/forms/basics.scss b/forms/basics.scss
new file mode 100644
index 0000000..72ea9bf
--- /dev/null
+++ b/forms/basics.scss
@@ -0,0 +1,471 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/basics") {
+  // Helper
+  $helper-previous-tags: "input, select, textarea, fieldset";
+  /**
+   * Basics form elements
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Change the font styles in all browsers
+  // 2. Remove the margin in Firefox and Safari
+  #{$parent-selector} input,
+  #{$parent-selector} optgroup,
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    margin: 0; // 2
+    font-size: 1rem; // 1
+    line-height: var(#{$css-var-prefix}line-height); // 1
+    font-family: inherit; // 1
+    letter-spacing: inherit; // 2
+  }
+
+  // Show the overflow in IE.
+  #{$parent-selector} input {
+    overflow: visible;
+  }
+
+  // Remove the inheritance of text transform in Edge, Firefox, and IE
+  #{$parent-selector} select {
+    text-transform: none;
+  }
+
+  // 1. Correct the text wrapping in Edge and IE
+  // 2. Correct the color inheritance from `fieldset` elements in IE
+  // 3. Remove the padding so developers are not caught out when they zero out
+  // `fieldset` elements in all browsers
+  #{$parent-selector} legend {
+    max-width: 100%; // 1
+    padding: 0; // 3
+    color: inherit; // 2
+    white-space: normal; // 1
+  }
+
+  // 1. Remove the default vertical scrollbar in IE
+  #{$parent-selector} textarea {
+    overflow: auto; // 1
+  }
+
+  // Remove the padding in IE 10
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"] {
+    padding: 0;
+  }
+
+  // Correct the cursor style of increment and decrement buttons in Safari
+  #{$parent-selector} ::-webkit-inner-spin-button,
+  #{$parent-selector} ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  // 1. Correct the odd appearance in Chrome and Safari
+  // 2. Correct the outline style in Safari
+  #{$parent-selector} [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // Remove the inner padding in Chrome and Safari on macOS
+  #{$parent-selector} [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // 1. Correct the inability to style clickable types in iOS and Safari
+  // 2. Change font properties to `inherit` in Safari
+  #{$parent-selector} ::-webkit-file-upload-button {
+    -webkit-appearance: button; // 1
+    font: inherit; // 2
+  }
+
+  // Remove the inner border and padding of focus outlines in Firefox
+  #{$parent-selector} ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  //  Remove the focus outline in Firefox
+  #{$parent-selector} :-moz-focusring {
+    outline: none;
+  }
+
+  // Remove the additional :invalid styles in Firefox
+  #{$parent-selector} :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  // Change the inconsistent appearance in IE (opinionated)
+  #{$parent-selector} ::-ms-expand {
+    display: none;
+  }
+
+  // Remove the border and padding in all browsers (opinionated)
+  #{$parent-selector} [type="file"],
+  #{$parent-selector} [type="range"] {
+    padding: 0;
+    border-width: 0;
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  // Force height for alternatives input types
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
+    height: calc(
+      (1rem * var(#{$css-var-prefix}line-height)) +
+        (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
+        (var(#{$css-var-prefix}border-width) * 2)
+    );
+  }
+
+  // Fieldset
+  #{$parent-selector} fieldset {
+    width: 100%;
+    margin: 0;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    padding: 0;
+    border: 0;
+  }
+
+  // Label & legend
+  #{$parent-selector} label,
+  #{$parent-selector} fieldset legend {
+    display: block;
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
+  }
+
+  #{$parent-selector} fieldset legend {
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+  }
+
+  // Blocks, 100%
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} button[type="submit"],
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    width: 100%;
+  }
+
+  // Reset appearance (Not Checkboxes, Radios, Range and File)
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    appearance: none;
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+  }
+
+  // Commons styles
+  #{$parent-selector} input,
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
+    #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
+    #{$css-var-prefix}box-shadow: none;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color);
+    box-shadow: var(#{$css-var-prefix}box-shadow);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+  }
+
+  // Active & Focus
+  #{$parent-selector}
+    input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [readonly]
+    ),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:is(:active, :focus) {
+      #{$css-var-prefix}background-color: var(
+        #{$css-var-prefix}form-element-active-background-color
+      );
+    }
+  }
+
+  // Active & Focus
+  #{$parent-selector}
+    input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:is(:active, :focus) {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
+    }
+  }
+
+  // Focus
+  #{$parent-selector}
+    input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="range"],
+      [type="file"],
+      [readonly]
+    ),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:focus {
+      #{$css-var-prefix}box-shadow: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}form-element-focus-color);
+    }
+  }
+
+  // Disabled
+  #{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
+  #{$parent-selector} select[disabled],
+  #{$parent-selector} textarea[disabled],
+  #{$parent-selector} label[aria-disabled="true"],
+  #{$parent-selector}
+    :where(fieldset[disabled])
+    :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+    opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
+    pointer-events: none;
+  }
+
+  #{$parent-selector} label[aria-disabled="true"] input[disabled] {
+    opacity: 1;
+  }
+
+  // Aria-invalid
+  #{$parent-selector} :where(input, select, textarea) {
+    &:not(
+        [type="checkbox"],
+        [type="radio"],
+        [type="date"],
+        [type="datetime-local"],
+        [type="month"],
+        [type="time"],
+        [type="week"],
+        [type="range"]
+      ) {
+      &[aria-invalid] {
+        @if $enable-important {
+          padding-right: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
+          ) !important;
+          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+          padding-inline-end: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
+          ) !important;
+        } @else {
+          padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+        }
+        background-position: center right 0.75rem;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+      }
+
+      &[aria-invalid="false"]:not(select) {
+        background-image: var(#{$css-var-prefix}icon-valid);
+      }
+
+      &[aria-invalid="true"]:not(select) {
+        background-image: var(#{$css-var-prefix}icon-invalid);
+      }
+    }
+
+    &[aria-invalid="false"] {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
+
+      &:is(:active, :focus) {
+        @if $enable-important {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-valid-active-border-color
+          ) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-valid-focus-color) !important;
+          }
+        } @else {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-valid-active-border-color
+          );
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-valid-focus-color);
+          }
+        }
+      }
+    }
+
+    &[aria-invalid="true"] {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
+
+      &:is(:active, :focus) {
+        @if $enable-important {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-invalid-active-border-color
+          ) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
+          }
+        } @else {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-invalid-active-border-color
+          );
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-invalid-focus-color);
+          }
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} :where(input, select, textarea) {
+      &:not([type="checkbox"], [type="radio"]) {
+        &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
+          background-position: center left 0.75rem;
+        }
+      }
+    }
+  }
+
+  // Placeholder
+  #{$parent-selector} input::placeholder,
+  #{$parent-selector} input::-webkit-input-placeholder,
+  #{$parent-selector} textarea::placeholder,
+  #{$parent-selector} textarea::-webkit-input-placeholder,
+  #{$parent-selector} select:invalid {
+    color: var(#{$css-var-prefix}form-element-placeholder-color);
+    opacity: 1;
+  }
+
+  // Margin bottom (Not Checkboxes and Radios)
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    margin-bottom: var(#{$css-var-prefix}spacing);
+  }
+
+  // Select
+  #{$parent-selector} select {
+    // Unstyle the caret on `<select>`s in IE10+.
+    &::-ms-expand {
+      border: 0;
+      background-color: transparent;
+    }
+
+    &:not([multiple], [size]) {
+      padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      background-image: var(#{$css-var-prefix}icon-chevron);
+      background-position: center right 0.75rem;
+      background-size: 1rem auto;
+      background-repeat: no-repeat;
+    }
+
+    &[multiple] {
+      option {
+        &:checked {
+          background: var(#{$css-var-prefix}form-element-selected-background-color);
+          color: var(#{$css-var-prefix}form-element-color);
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} select {
+      &:not([multiple], [size]) {
+        background-position: center left 0.75rem;
+      }
+    }
+  }
+
+  // Textarea
+  #{$parent-selector} textarea {
+    display: block;
+    resize: vertical;
+
+    &[aria-invalid] {
+      @if $enable-important {
+        #{$css-var-prefix}icon-height: calc(
+          (1rem * var(#{$css-var-prefix}line-height)) +
+            (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
+            (var(#{$css-var-prefix}border-width) * 2)
+        );
+        background-position: top right 0.75rem !important;
+        background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
+      }
+    }
+  }
+  @if map.get($modules, "layout/grid") and $enable-classes {
+    $helper-previous-tags: $helper-previous-tags + ", .grid";
+  }
+
+  #{$parent-selector} :where(#{$helper-previous-tags}) {
+    + small {
+      display: block;
+      width: 100%;
+      margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
+      margin-bottom: var(#{$css-var-prefix}spacing);
+      color: var(#{$css-var-prefix}muted-color);
+    }
+    &[aria-invalid="false"] {
+      + small {
+        color: var(#{$css-var-prefix}ins-color);
+      }
+    }
+    &[aria-invalid="true"] {
+      + small {
+        color: var(#{$css-var-prefix}del-color);
+      }
+    }
+  }
+
+  // Styles for Input inside a label
+  #{$parent-selector} label {
+    > :where(input, select, textarea) {
+      margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+    }
+  }
+}
diff --git a/forms/checkbox-radio-switch.scss b/forms/checkbox-radio-switch.scss
new file mode 100644
index 0000000..9e53aa5
--- /dev/null
+++ b/forms/checkbox-radio-switch.scss
@@ -0,0 +1,177 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/checkbox-radio-switch") {
+  /**
+   * Checkboxes, Radios and Switches
+   */
+
+  // Labels
+  // Not working in Firefox, which doesn't support the `:has()` pseudo-class
+  #{$parent-selector} label {
+    &:has([type="checkbox"], [type="radio"]) {
+      width: fit-content;
+      cursor: pointer;
+    }
+  }
+
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 1.25em;
+    height: 1.25em;
+    margin-top: -0.125em;
+    margin-inline-end: 0.5em;
+    border-width: var(#{$css-var-prefix}border-width);
+    vertical-align: middle;
+    cursor: pointer;
+
+    &::-ms-check {
+      display: none; // unstyle IE checkboxes
+    }
+
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+      background-image: var(#{$css-var-prefix}icon-checkbox);
+      background-position: center;
+      background-size: 0.75em auto;
+      background-repeat: no-repeat;
+    }
+
+    & ~ label {
+      display: inline-block;
+      margin-bottom: 0;
+      cursor: pointer;
+
+      &:not(:last-of-type) {
+        margin-inline-end: 1em;
+      }
+    }
+  }
+
+  // Checkboxes
+  #{$parent-selector} [type="checkbox"] {
+    &:indeterminate {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+      background-image: var(#{$css-var-prefix}icon-minus);
+      background-position: center;
+      background-size: 0.75em auto;
+      background-repeat: no-repeat;
+    }
+  }
+
+  // Radios
+  #{$parent-selector} [type="radio"] {
+    border-radius: 50%;
+
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
+      border-width: 0.35em;
+      background-image: none;
+    }
+  }
+
+  // Switchs
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
+
+    // Config
+    $switch-height: 1.25em;
+    $switch-width: 2.25em;
+    $switch-transition: 0.1s ease-in-out;
+
+    // Styles
+    width: $switch-width;
+    height: $switch-height;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: $switch-height;
+    background-color: var(#{$css-var-prefix}background-color);
+    line-height: $switch-height;
+
+    &:not([aria-invalid]) {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
+    }
+
+    &:before {
+      display: block;
+      aspect-ratio: 1;
+      height: 100%;
+      border-radius: 50%;
+      background-color: var(#{$css-var-prefix}color);
+      box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
+      content: "";
+
+      @if $enable-transitions {
+        transition: margin $switch-transition;
+      }
+    }
+
+    &:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
+    }
+
+    &:checked {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
+      background-image: none;
+
+      &::before {
+        margin-inline-start: calc(#{$switch-width} - #{$switch-height});
+      }
+    }
+
+    &[disabled] {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
+    }
+  }
+
+  // Aria-invalid
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    &[aria-invalid="false"] {
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
+      }
+    }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$css-var-prefix}background-color: var(
+          #{$css-var-prefix}form-element-invalid-border-color
+        );
+      }
+    }
+  }
+
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"],
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    &[aria-invalid="false"] {
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
+      }
+    }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
+      }
+    }
+  }
+}
diff --git a/forms/input-color.scss b/forms/input-color.scss
new file mode 100644
index 0000000..3b5f28c
--- /dev/null
+++ b/forms/input-color.scss
@@ -0,0 +1,37 @@
+@use "sass:map";
+@use "../settings" as *;
+
+// Wrapper
+@mixin color-wrapper {
+  padding: 0;
+}
+
+// Swatch
+@mixin color-swatch {
+  border: 0;
+  border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
+}
+
+@if map.get($modules, "forms/input-color") {
+  /**
+   * Input type color
+   */
+
+  #{$parent-selector} [type="color"] {
+    &::-webkit-color-swatch-wrapper {
+      @include color-wrapper;
+    }
+
+    &::-moz-focus-inner {
+      @include color-wrapper;
+    }
+
+    &::-webkit-color-swatch {
+      @include color-swatch;
+    }
+
+    &::-moz-color-swatch {
+      @include color-swatch;
+    }
+  }
+}
diff --git a/forms/input-date.scss b/forms/input-date.scss
new file mode 100644
index 0000000..c1e1c20
--- /dev/null
+++ b/forms/input-date.scss
@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-date") {
+  /**
+   * Input type datetime
+   */
+
+  // :not() are needed to add Specificity and avoid !important on padding
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+      #{$css-var-prefix}icon-position: 0.75rem;
+      #{$css-var-prefix}icon-width: 1rem;
+      padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
+      background-image: var(#{$css-var-prefix}icon-date);
+      background-position: center right var(#{$css-var-prefix}icon-position);
+      background-size: var(#{$css-var-prefix}icon-width) auto;
+      background-repeat: no-repeat;
+    }
+
+    // Time
+    &[type="time"] {
+      background-image: var(#{$css-var-prefix}icon-time);
+    }
+  }
+
+  // Calendar picker
+  #{$parent-selector} [type="date"],
+  #{$parent-selector} [type="datetime-local"],
+  #{$parent-selector} [type="month"],
+  #{$parent-selector} [type="time"],
+  #{$parent-selector} [type="week"] {
+    &::-webkit-calendar-picker-indicator {
+      width: var(#{$css-var-prefix}icon-width);
+      margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
+      margin-left: var(#{$css-var-prefix}icon-position);
+      opacity: 0;
+    }
+  }
+
+  // Calendar icons are hidden in Firefox
+  @if $enable-important {
+    @-moz-document url-prefix() {
+      #{$parent-selector} [type="date"],
+      #{$parent-selector} [type="datetime-local"],
+      #{$parent-selector} [type="month"],
+      #{$parent-selector} [type="time"],
+      #{$parent-selector} [type="week"] {
+        padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+        background-image: none !important;
+      }
+    }
+  }
+
+  [dir="rtl"]
+    #{$parent-selector}
+    :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+    text-align: right;
+  }
+}
diff --git a/forms/input-file.scss b/forms/input-file.scss
new file mode 100644
index 0000000..a550508
--- /dev/null
+++ b/forms/input-file.scss
@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-file") {
+  /**
+   * Input type file
+   */
+
+  // 1. Hack to display the outline on the focused file selector button
+  //    with the forced overflow hidden on the input[type="file"] element.
+  #{$parent-selector} [type="file"] {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
+    margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
+    padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
+    padding-left: var(#{$css-var-prefix}outline-width); // 1
+    border: 0;
+    border-radius: 0;
+    background: none;
+
+    &::file-selector-button {
+      margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
+      padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}form-element-spacing-horizontal);
+    }
+
+    &:is(:hover, :active, :focus) {
+      &::file-selector-button {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+      }
+    }
+
+    &:focus {
+      &::file-selector-button {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+  }
+}
diff --git a/forms/input-range.scss b/forms/input-range.scss
new file mode 100644
index 0000000..08b8124
--- /dev/null
+++ b/forms/input-range.scss
@@ -0,0 +1,100 @@
+@use "sass:map";
+@use "../settings" as *;
+
+// Config
+$height-track: 0.375rem;
+$height-thumb: 1.25rem;
+$border-thumb: 2px;
+
+// Slider Track
+@mixin slider-track {
+  width: 100%;
+  height: $height-track;
+  border-radius: var(#{$css-var-prefix}border-radius);
+  background-color: var(#{$css-var-prefix}range-border-color);
+
+  @if $enable-transitions {
+    transition:
+      background-color var(#{$css-var-prefix}transition),
+      box-shadow var(#{$css-var-prefix}transition);
+  }
+}
+
+// Slider Thumb
+@mixin slider-thumb {
+  -webkit-appearance: none;
+  width: $height-thumb;
+  height: $height-thumb;
+  margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
+  border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
+  border-radius: 50%;
+  background-color: var(#{$css-var-prefix}range-thumb-color);
+  cursor: pointer;
+
+  @if $enable-transitions {
+    transition:
+      background-color var(#{$css-var-prefix}transition),
+      transform var(#{$css-var-prefix}transition);
+  }
+}
+
+@if map.get($modules, "forms/input-range") {
+  /**
+   * Input type range
+   */
+
+  #{$parent-selector} [type="range"] {
+    // Styles
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: $height-thumb;
+    background: none;
+
+    &::-webkit-slider-runnable-track {
+      @include slider-track;
+    }
+
+    &::-moz-range-track {
+      @include slider-track;
+    }
+
+    &::-ms-track {
+      @include slider-track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include slider-thumb;
+    }
+
+    &::-moz-range-thumb {
+      @include slider-thumb;
+    }
+
+    &::-ms-thumb {
+      @include slider-thumb;
+    }
+
+    &:active,
+    &:focus-within {
+      #{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
+      #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
+    }
+
+    &:active {
+      // Slider Thumb
+      &::-webkit-slider-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-moz-range-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-ms-thumb {
+        transform: scale(1.25);
+      }
+    }
+  }
+}
diff --git a/forms/input-search.scss b/forms/input-search.scss
new file mode 100644
index 0000000..f015906
--- /dev/null
+++ b/forms/input-search.scss
@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-search") {
+  /**
+   * Input type search
+   */
+
+  // :not() are needed to add Specificity and avoid !important on padding
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    &[type="search"] {
+      padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
+      background-image: var(#{$css-var-prefix}icon-search);
+      background-position: center
+        left
+        calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem);
+      background-size: 1rem auto;
+      background-repeat: no-repeat;
+
+      &[aria-invalid] {
+        @if $enable-important {
+          padding-inline-start: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
+          ) !important;
+        } @else {
+          padding-inline-start: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
+          );
+        }
+        background-position:
+          center left 1.125rem,
+          center right 0.75rem;
+      }
+
+      &[aria-invalid="false"] {
+        background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
+      }
+
+      &[aria-invalid="true"] {
+        background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} :where(input) {
+      &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+        &[type="search"] {
+          background-position: center right 1.125rem;
+
+          &[aria-invalid] {
+            background-position:
+              center right 1.125rem,
+              center left 0.75rem;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/functions.scss b/functions.scss
new file mode 100644
index 0000000..c6a704b
--- /dev/null
+++ b/functions.scss
@@ -0,0 +1,49 @@
+// Display color as RGB
+@function display-rgb($color) {
+  @return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
+}
+
+// Generate a shadow layer
+@function shadow-layer($elevation, $blur, $opacity, $color) {
+  @return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
+}
+
+// Generate a shadow with 7 layers
+@function shadow($color) {
+  $box-shadow-elevation: 1rem;
+  $box-shadow-blur-strengh: 6rem;
+  $box-shadow-opacity: 0.06;
+
+  @return shadow-layer(
+      $box-shadow-elevation * 0.029,
+      $box-shadow-blur-strengh * 0.029,
+      $box-shadow-opacity * 0.283,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.067,
+      $box-shadow-blur-strengh * 0.067,
+      $box-shadow-opacity * 0.4,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.125,
+      $box-shadow-blur-strengh * 0.125,
+      $box-shadow-opacity * 0.5,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.225,
+      $box-shadow-blur-strengh * 0.225,
+      $box-shadow-opacity * 0.6,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.417,
+      $box-shadow-blur-strengh * 0.417,
+      $box-shadow-opacity * 0.717,
+      $color
+    ),
+    shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color),
+    0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
+}
diff --git a/includes/index.php b/includes/index.php
deleted file mode 100644
index 3d7d166..0000000
--- a/includes/index.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<?php
-require_once __DIR__ . '/admin/index.php';
-require_once __DIR__ . '/enqueue.php';
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a828ed3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,568 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Tangible Design</title>
+    <meta
+      name="description"
+      content="Building blocks for creating design systems"
+    />
+
+    <link rel="stylesheet" href="design.min.css" />
+  </head>
+
+  <body class="tgbl-interface">
+
+    <!-- Header -->
+    <header class="container">
+      <hgroup>
+        <h1>Tangible Design</h1>
+        <p>Clean simple foundation and building blocks for creating design systems</p>
+      </hgroup>
+      <nav>
+        <ul>
+          <li>
+            <details class="dropdown">
+              <summary role="button" class="secondary">Theme</summary>
+              <ul>
+                <li><a href="#" data-theme-switcher="auto">Auto</a></li>
+                <li><a href="#" data-theme-switcher="light">Light</a></li>
+                <li><a href="#" data-theme-switcher="dark">Dark</a></li>
+              </ul>
+            </details>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <!-- ./ Header -->
+
+    <!-- Main -->
+    <main class="container">
+      <!-- Preview -->
+      <section id="preview">
+        <h2>Preview</h2>
+        <p>
+          Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet
+          suscipit sapien. Nulla iaculis eros a elit pharetra egestas.
+        </p>
+        <form>
+          <div class="grid">
+            <input
+              type="text"
+              name="firstname"
+              placeholder="First name"
+              aria-label="First name"
+              required
+            />
+            <input
+              type="email"
+              name="email"
+              placeholder="Email address"
+              aria-label="Email address"
+              autocomplete="email"
+              required
+            />
+            <button type="submit">Subscribe</button>
+          </div>
+          <fieldset>
+            <label for="terms">
+              <input type="checkbox" role="switch" id="terms" name="terms" />
+              I agree to the
+              <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
+            </label>
+          </fieldset>
+        </form>
+      </section>
+      <!-- ./ Preview -->
+
+      <!-- Typography-->
+      <section id="typography">
+        <h2>Typography</h2>
+        <p>
+          Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget
+          efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat
+          turpis pretium. Quisque sed tristique felis.
+        </p>
+
+        <!-- Blockquote-->
+        <blockquote>
+          "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
+          Nam at dui sit amet ipsum cursus ornare."
+          <footer>
+            <cite>- Phasellus eget lacinia</cite>
+          </footer>
+        </blockquote>
+
+        <!-- Lists-->
+        <h3>Lists</h3>
+        <ul>
+          <li>Aliquam lobortis lacus eu libero ornare facilisis.</li>
+          <li>Nam et magna at libero scelerisque egestas.</li>
+          <li>Suspendisse id nisl ut leo finibus vehicula quis eu ex.</li>
+          <li>Proin ultricies turpis et volutpat vehicula.</li>
+        </ul>
+
+        <!-- Inline text elements-->
+        <h3>Inline text elements</h3>
+        <div class="grid">
+          <p><a href="#" onclick="event.preventDefault()">Primary link</a></p>
+          <p>
+            <a href="#" class="secondary" onclick="event.preventDefault()"
+              >Secondary link</a
+            >
+          </p>
+          <p>
+            <a href="#" class="contrast" onclick="event.preventDefault()"
+              >Contrast link</a
+            >
+          </p>
+        </div>
+        <div class="grid">
+          <p><strong>Bold</strong></p>
+          <p><em>Italic</em></p>
+          <p><u>Underline</u></p>
+        </div>
+        <div class="grid">
+          <p><del>Deleted</del></p>
+          <p><ins>Inserted</ins></p>
+          <p><s>Strikethrough</s></p>
+        </div>
+        <div class="grid">
+          <p><small>Small </small></p>
+          <p>Text <sub>Sub</sub></p>
+          <p>Text <sup>Sup</sup></p>
+        </div>
+        <div class="grid">
+          <p>
+            <abbr title="Abbreviation" data-tooltip="Abbreviation">Abbr.</abbr>
+          </p>
+          <p><kbd>Kbd</kbd></p>
+          <p><mark>Highlighted</mark></p>
+        </div>
+
+        <!-- Headings-->
+        <h3>Heading 3</h3>
+        <p>
+          Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis
+          ipsum, at efficitur sem scelerisque vel. Aliquam auctor diam ut purus
+          cursus fringilla. Class aptent taciti sociosqu ad litora torquent per
+          conubia nostra, per inceptos himenaeos.
+        </p>
+        <h4>Heading 4</h4>
+        <p>
+          Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at
+          blandit nibh. Donec ac fermentum felis. Vivamus tincidunt arcu ut
+          lacus hendrerit, eget mattis dui finibus.
+        </p>
+        <h5>Heading 5</h5>
+        <p>
+          Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris
+          maximus ante in consequat luctus. Morbi euismod sagittis efficitur.
+          Aenean non eros orci. Vivamus ut diam sem.
+        </p>
+        <h6>Heading 6</h6>
+        <p>
+          Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum
+          tincidunt nulla ut tortor posuere, vitae malesuada tortor molestie.
+          Sed nec interdum dolor. Vestibulum id auctor nisi, a efficitur sem.
+          Aliquam sollicitudin efficitur turpis, sollicitudin hendrerit ligula
+          semper id. Nunc risus felis, egestas eu tristique eget, convallis in
+          velit.
+        </p>
+
+        <!-- Medias-->
+        <figure>
+          <img
+            src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
+            alt="Minimal landscape"
+          />
+          <figcaption>
+            Image from
+            <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank"
+              >unsplash.com</a
+            >
+          </figcaption>
+        </figure>
+      </section>
+      <!-- ./ Typography-->
+
+      <!-- Buttons-->
+      <section id="buttons">
+        <h2>Buttons</h2>
+        <p class="grid">
+          <button>Primary</button>
+          <button class="secondary">Secondary</button>
+          <button class="contrast">Contrast</button>
+        </p>
+        <p class="grid">
+          <button class="outline">Primary outline</button>
+          <button class="outline secondary">Secondary outline</button>
+          <button class="outline contrast">Contrast outline</button>
+        </p>
+      </section>
+      <!-- ./ Buttons -->
+
+      <!-- Form elements-->
+      <section id="form">
+        <form>
+          <h2>Form elements</h2>
+
+          <!-- Search -->
+          <label for="search">Search</label>
+          <input type="search" id="search" name="search" placeholder="Search" />
+
+          <!-- Text -->
+          <label for="text">Text</label>
+          <input type="text" id="text" name="text" placeholder="Text" />
+          <small>Curabitur consequat lacus at lacus porta finibus.</small>
+
+          <!-- Select -->
+          <label for="select">Select</label>
+          <select id="select" name="select" required>
+            <option value="" selected>Select…</option>
+            <option>…</option>
+          </select>
+
+          <!-- File browser -->
+          <label for="file"
+            >File browser
+            <input type="file" id="file" name="file" />
+          </label>
+
+          <!-- Range slider control -->
+          <label for="range"
+            >Range slider
+            <input
+              type="range"
+              min="0"
+              max="100"
+              value="50"
+              id="range"
+              name="range"
+            />
+          </label>
+
+          <!-- States -->
+          <div class="grid">
+            <label for="valid">
+              Valid
+              <input
+                type="text"
+                id="valid"
+                name="valid"
+                placeholder="Valid"
+                aria-invalid="false"
+              />
+            </label>
+            <label for="invalid">
+              Invalid
+              <input
+                type="text"
+                id="invalid"
+                name="invalid"
+                placeholder="Invalid"
+                aria-invalid="true"
+              />
+            </label>
+            <label for="disabled">
+              Disabled
+              <input
+                type="text"
+                id="disabled"
+                name="disabled"
+                placeholder="Disabled"
+                disabled
+              />
+            </label>
+          </div>
+
+          <div class="grid">
+            <!-- Date-->
+            <label for="date"
+              >Date
+              <input type="date" id="date" name="date" />
+            </label>
+
+            <!-- Time-->
+            <label for="time"
+              >Time
+              <input type="time" id="time" name="time" />
+            </label>
+
+            <!-- Color-->
+            <label for="color"
+              >Color
+              <input type="color" id="color" name="color" value="#0eaaaa" />
+            </label>
+          </div>
+
+          <div class="grid">
+            <!-- Checkboxes -->
+            <fieldset>
+              <legend><strong>Checkboxes</strong></legend>
+              <label for="checkbox-1">
+                <input
+                  type="checkbox"
+                  id="checkbox-1"
+                  name="checkbox-1"
+                  checked
+                />
+                Checkbox
+              </label>
+              <label for="checkbox-2">
+                <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+                Checkbox
+              </label>
+            </fieldset>
+
+            <!-- Radio buttons -->
+            <fieldset>
+              <legend><strong>Radio buttons</strong></legend>
+              <label for="radio-1">
+                <input
+                  type="radio"
+                  id="radio-1"
+                  name="radio"
+                  value="radio-1"
+                  checked
+                />
+                Radio button
+              </label>
+              <label for="radio-2">
+                <input type="radio" id="radio-2" name="radio" value="radio-2" />
+                Radio button
+              </label>
+            </fieldset>
+
+            <!-- Switch -->
+            <fieldset>
+              <legend><strong>Switches</strong></legend>
+              <label for="switch-1">
+                <input
+                  type="checkbox"
+                  id="switch-1"
+                  name="switch-1"
+                  role="switch"
+                  checked
+                />
+                Switch
+              </label>
+              <label for="switch-2">
+                <input
+                  type="checkbox"
+                  id="switch-2"
+                  name="switch-2"
+                  role="switch"
+                />
+                Switch
+              </label>
+            </fieldset>
+          </div>
+
+          <!-- Buttons -->
+          <input type="reset" value="Reset" onclick="event.preventDefault()" />
+          <input
+            type="submit"
+            value="Submit"
+            onclick="event.preventDefault()"
+          />
+        </form>
+      </section>
+      <!-- ./ Form elements-->
+
+      <!-- Tables -->
+      <section id="tables">
+        <h2>Tables</h2>
+        <div class="overflow-auto">
+          <table class="striped">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <!-- ./ Tables -->
+
+      <!-- Modal -->
+      <section id="modal">
+        <h2>Modal</h2>
+        <button
+          class="contrast"
+          data-target="modal-example"
+          onclick="toggleModal(event)"
+        >
+          Launch demo modal
+        </button>
+      </section>
+      <!-- ./ Modal -->
+
+      <!-- Accordions -->
+      <section id="accordions">
+        <h2>Accordions</h2>
+        <details>
+          <summary>Accordion 1</summary>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque urna diam, tincidunt nec porta sed, auctor id velit.
+            Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo.
+            Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis
+            lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris
+            pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac
+            ipsum ultrices, porta turpis sit amet, congue turpis.
+          </p>
+        </details>
+        <details open>
+          <summary>Accordion 2</summary>
+          <ul>
+            <li>Vestibulum id elit quis massa interdum sodales.</li>
+            <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
+            <li>Quisque sed eros non eros ornare elementum.</li>
+            <li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
+          </ul>
+        </details>
+      </section>
+      <!-- ./ Accordions -->
+
+      <!-- Article-->
+      <article id="article">
+        <h2>Article</h2>
+        <p>
+          Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed
+          ultricies dolor non ante vulputate hendrerit. Vivamus sit amet
+          suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc
+          placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra
+          rutrum.
+        </p>
+        <footer>
+          <small
+            >Duis nec elit placerat, suscipit nibh quis, finibus neque.</small
+          >
+        </footer>
+      </article>
+      <!-- ./ Article-->
+
+      <!-- Group -->
+      <section id="group">
+        <h2>Group</h2>
+        <form>
+          <fieldset role="group">
+            <input
+              name="email"
+              type="email"
+              placeholder="Enter your email"
+              autocomplete="email"
+            />
+            <input type="submit" value="Subscribe" />
+          </fieldset>
+        </form>
+      </section>
+      <!-- ./ Group -->
+
+      <!-- Progress -->
+      <section id="progress">
+        <h2>Progress bar</h2>
+        <progress id="progress-1" value="25" max="100"></progress>
+        <progress id="progress-2"></progress>
+      </section>
+      <!-- ./ Progress -->
+
+      <!-- Loading -->
+      <section id="loading">
+        <h2>Loading</h2>
+        <article aria-busy="true"></article>
+        <button aria-busy="true">Please wait…</button>
+      </section>
+      <!-- ./ Loading -->
+    </main>
+    <!-- ./ Main -->
+
+    <!-- Footer -->
+    <footer class="container"></footer>
+    <!-- ./ Footer -->
+
+    <!-- Modal example -->
+    <dialog id="modal-example">
+      <article>
+        <header>
+          <button
+            aria-label="Close"
+            rel="prev"
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+          ></button>
+          <h3>Confirm your action!</h3>
+        </header>
+        <p>
+          Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue
+          finibus pellentesque. Nullam finibus risus non semper euismod.
+        </p>
+        <footer>
+          <button
+            role="button"
+            class="secondary"
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+          >
+            Cancel</button
+          ><button
+            autofocus
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+          >
+            Confirm
+          </button>
+        </footer>
+      </article>
+    </dialog>
+    <!-- ./ Modal example -->
+
+    <!-- Minimal theme switcher -->
+    <script src="theme-switcher.js"></script>
+
+    <!-- Modal -->
+    <script src="modal.js"></script>
+  </body>
+</html>
diff --git a/index.php b/index.php
index d752d4e..1a068f5 100644
--- a/index.php
+++ b/index.php
@@ -21,8 +21,9 @@ function load() {
     design::$state->path = __DIR__;
     design::$state->url = untrailingslashit(plugins_url('/', __FILE__));
 
-    require_once __DIR__ . '/includes/index.php';
-
+    require_once __DIR__ . '/admin/index.php';
+    require_once __DIR__ . '/enqueue.php';
+    
     do_action($this->name . '_ready');
   }
 });
diff --git a/index.scss b/index.scss
new file mode 100644
index 0000000..c2e5c5a
--- /dev/null
+++ b/index.scss
@@ -0,0 +1,47 @@
+// Config
+@forward "settings";
+
+// Theming
+@use "themes/default";
+
+// Layout
+@use "layout/document"; // html
+@use "layout/landmarks"; // body, header, main, footer
+@use "layout/section"; // section
+@use "layout/container"; // .container, .container-fluid
+@use "layout/grid"; // .grid
+@use "layout/overflow-auto"; // .overflow-auto
+
+// Content
+@use "content/typography"; // headings, p, ul, blockquote, ...
+@use "content/link"; // a, role="link"
+@use "content/button"; // button, role="button", type="button", type="submit" ...
+@use "content/table"; // table, tr, td, ...
+@use "content/embedded"; // audio, canvas, iframe, img, svg, video
+@use "content/code"; // pre, code, ...
+@use "content/figure"; // figure, figcaption
+@use "content/other"; // hr, template, [hidden], dialog, canvas
+
+// Forms
+@use "forms/basics"; // input, select, textarea, label, fieldset, legend
+@use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
+@use "forms/input-color"; // type="color"
+@use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
+@use "forms/input-file"; // type="file"
+@use "forms/input-range"; // type="range"
+@use "forms/input-search"; // type="search"
+
+// Components
+@use "components/accordion"; // details, summary
+@use "components/card"; // article
+@use "components/dropdown"; // details.dropdown
+@use "components/group"; // role="group"
+@use "components/loading"; // aria-busy=true
+@use "components/modal"; // dialog
+@use "components/nav"; // nav
+@use "components/progress"; // progress
+@use "components/tooltip"; // data-tooltip
+
+// Utilities
+@use "utilities/accessibility"; // -ms-touch-action, aria-*
+@use "utilities/reduce-motion"; // prefers-reduced-motion
diff --git a/layout/container.scss b/layout/container.scss
new file mode 100644
index 0000000..0efa9ad
--- /dev/null
+++ b/layout/container.scss
@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/container") and $enable-classes {
+  /**
+   * Container
+   */
+
+  .container,
+  .container-fluid {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(#{$css-var-prefix}spacing);
+    padding-left: var(#{$css-var-prefix}spacing);
+  }
+
+  .container {
+    $first-breakpoint: true;
+    @each $key, $values in $breakpoints {
+      @if $values {
+        @media (min-width: map.get($values, "breakpoint")) {
+          max-width: map.get($values, "viewport");
+          @if $first-breakpoint {
+            $first-breakpoint: false;
+            padding-right: 0;
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/layout/document.scss b/layout/document.scss
new file mode 100644
index 0000000..4677a69
--- /dev/null
+++ b/layout/document.scss
@@ -0,0 +1,52 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/document") {
+  /**
+   * Document
+   * Content-box & Responsive typography
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Add border box sizing in all browsers (opinionated)
+  // 2. Backgrounds do not repeat by default (opinionated)
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box; // 1
+    background-repeat: no-repeat; // 2
+  }
+
+  // 1. Add text decoration inheritance in all browsers (opinionated)
+  // 2. Add vertical alignment inheritance in all browsers (opinionated)
+  ::before,
+  ::after {
+    text-decoration: inherit; // 1
+    vertical-align: inherit; // 2
+  }
+
+  // 1. Change the line height in all browsers (opinionated)
+  // 2. Breaks words to prevent overflow in all browsers (opinionated)
+  // 3. Use a 4-space tab width in all browsers (opinionated)
+  // 4. Remove the grey highlight on links in iOS (opinionated)
+  // 5. Prevent adjustments of font size after orientation changes in iOS
+  :where(:root) {
+    -webkit-tap-highlight-color: transparent; // 4
+    -webkit-text-size-adjust: 100%; // 5
+    text-size-adjust: 100%; // 5
+    background-color: var(#{$css-var-prefix}background-color);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: var(#{$css-var-prefix}font-size);
+    line-height: var(#{$css-var-prefix}line-height); // 1
+    font-family: var(#{$css-var-prefix}font-family);
+    text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
+    text-rendering: optimizeLegibility;
+    overflow-wrap: break-word; // 2
+    tab-size: 4; // 3
+  }
+}
diff --git a/layout/grid.scss b/layout/grid.scss
new file mode 100644
index 0000000..025a38c
--- /dev/null
+++ b/layout/grid.scss
@@ -0,0 +1,26 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/grid") and $enable-classes {
+  /**
+   * Grid
+   * Minimal grid system with auto-layout columns
+   */
+
+  .grid {
+    grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
+    grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @if map.get($breakpoints, "md") {
+      @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+      }
+    }
+
+    & > * {
+      min-width: 0; // HACK for childs in overflow
+    }
+  }
+}
diff --git a/layout/landmarks.scss b/layout/landmarks.scss
new file mode 100644
index 0000000..981abe0
--- /dev/null
+++ b/layout/landmarks.scss
@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/landmarks") {
+  /**
+   * Landmarks
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove the margin in all browsers (opinionated)
+  body {
+    width: 100%;
+    margin: 0; // 1
+  }
+
+  // Render the `main` element consistently in IE
+  main {
+    display: block;
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+  #{$parent-selector} #{$semantic-root-element} {
+    > header,
+    > main,
+    > footer {
+      // <header>, <main>, <footer> as containers
+      @if $enable-semantic-container {
+        $first-breakpoint: true;
+        width: 100%;
+        margin-right: auto;
+        margin-left: auto;
+        padding: var(#{$css-var-prefix}block-spacing-vertical)
+          var(#{$css-var-prefix}block-spacing-horizontal);
+
+        @if $enable-viewport {
+          @each $key, $values in $breakpoints {
+            @if $values {
+              @media (min-width: map.get($values, "breakpoint")) {
+                max-width: map.get($values, "viewport");
+                @if $first-breakpoint {
+                  $first-breakpoint: false;
+                  padding-right: 0;
+                  padding-left: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // Regular vertical spacings for <header>, <main>, <footer>
+      @else {
+        padding-block: var(#{$css-var-prefix}block-spacing-vertical);
+      }
+    }
+  }
+}
diff --git a/layout/overflow-auto.scss b/layout/overflow-auto.scss
new file mode 100644
index 0000000..085d95a
--- /dev/null
+++ b/layout/overflow-auto.scss
@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/overflow-auto") and $enable-classes {
+  /**
+   * Overflow auto
+   */
+
+  #{$parent-selector} .overflow-auto {
+    overflow: auto;
+  }
+}
diff --git a/layout/section.scss b/layout/section.scss
new file mode 100644
index 0000000..4f88496
--- /dev/null
+++ b/layout/section.scss
@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/section") {
+  /**
+   * Section
+   */
+
+  #{$parent-selector} section {
+    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+  }
+}
diff --git a/license.txt b/license.txt
new file mode 100644
index 0000000..2200f48
--- /dev/null
+++ b/license.txt
@@ -0,0 +1,23 @@
+MIT License - Copyright (c) 2024 Tangible
+
+This software includes a fork of: https://github.com/picocss/pico
+
+MIT License - Copyright (c) 2019-2024 Pico
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/package.json b/package.json
index f8370c3..6b28d67 100644
--- a/package.json
+++ b/package.json
@@ -3,15 +3,15 @@
   "type": "module",
   "version": "2024.04.09",
   "scripts": {
-    "dev": "roll dev",
+    "start": "roll dev",
     "build": "roll build",
     "format": "roll format",
     "version": "node version.js",
-    "serve": "concurrently --raw 'roll dev' 'wp-now start'"
+    "wp": "concurrently --raw 'roll dev' 'wp-now start'"
   },
   "dependencies": {},
   "devDependencies": {
-    "@tangible/roller": "1.x",
+    "@tangible/roller": "2.x",
     "@wp-now/wp-now": "^0.1.66",
     "concurrently": "^8.2.2"
   }
diff --git a/readme.md b/readme.md
index 5c02957..9822769 100644
--- a/readme.md
+++ b/readme.md
@@ -58,7 +58,7 @@ npm install
 Start the server.
 
 ```sh
-npm run serve
+npm run start
 ```
 
 It opens a browser at `http://localhost:8881` and logs you in automatically. Test user is `admin` with `password`.
@@ -71,7 +71,7 @@ For convenience, this command also starts the development build script described
 
 ### Build for development
 
-Build files, and watch for changes to rebuild
+Build files (CSS/JS), and watch for changes to rebuild
 
 ```sh
 npm run dev
diff --git a/settings.scss b/settings.scss
new file mode 100644
index 0000000..0e75571
--- /dev/null
+++ b/settings.scss
@@ -0,0 +1,150 @@
+@use "sass:map";
+
+// Settings
+// ––––––––––––––––––––
+
+$prefix: tgbl- !default;
+
+// Theme color
+$theme-color: "blue" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
+
+// Prefix for CSS variables
+$css-var-prefix: "--#{$prefix}" !default; // Must start with "--"
+
+// Define the root element used to target <header>, <main>, <footer>
+// with $enable-semantic-container and $enable-responsive-spacings
+$semantic-root-element: "body" !default;
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: false !default;
+
+// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
+// Fluid layout if disabled
+$enable-viewport: true !default;
+
+// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
+// Fixed spacings by default
+$enable-responsive-spacings: false !default;
+
+// Enable responsive typography
+// Fixed root element size (rem) if disabled
+$enable-responsive-typography: true !default;
+
+// Enable .classes
+// .classless version if disabled
+$enable-classes: true !default;
+
+// Enable transitions
+$enable-transitions: true !default;
+
+// Enable overriding with !important
+$enable-important: true !default;
+
+// Optional parent selector
+// If defined, all HTML tags are wrapped with this selector
+// :root is not wrapped
+$parent-selector: ".#{$prefix}interface" !default; // Must start with "."
+
+// Breakpoints, viewports and root font size
+$breakpoints: () !default;
+$breakpoints: map.deep-merge(
+  (
+    // Small (landscape phones)
+    // Font size: 17px
+    sm:
+      (
+        breakpoint: 576px,
+        viewport: 510px,
+        root-font-size: 106.25%,
+      ),
+
+    // Medium (tablets)
+    // Font size: 18px
+    md:
+      (
+        breakpoint: 768px,
+        viewport: 700px,
+        root-font-size: 112.5%,
+      ),
+
+    // Large
+    // Font size: 19px
+    lg:
+      (
+        breakpoint: 1024px,
+        viewport: 950px,
+        root-font-size: 118.75%,
+      ),
+
+    // Extra large
+    // Font size: 20px
+    xl:
+      (
+        breakpoint: 1280px,
+        viewport: 1200px,
+        root-font-size: 125%,
+      ),
+
+    // Extra extra large
+    // Font size: 21px
+    xxl:
+      (
+        breakpoint: 1536px,
+        viewport: 1450px,
+        root-font-size: 131.25%,
+      )
+  ),
+  $breakpoints
+);
+
+// Modules to export
+$modules: () !default;
+$modules: map.merge(
+  (
+    // Theme
+    "themes/default": true,
+
+    // Layout
+    "layout/document": true,
+    "layout/landmarks": true,
+    "layout/container": true,
+    "layout/section": true,
+    "layout/grid": true,
+    "layout/overflow-auto": true,
+
+    // Content
+    "content/link": true,
+    "content/typography": true,
+    "content/embedded": true,
+    "content/button": true,
+    "content/table": true,
+    "content/code": true,
+    "content/figure": true,
+    "content/miscs": true,
+
+    // Forms
+    "forms/basics": true,
+    "forms/checkbox-radio-switch": true,
+    "forms/input-color": true,
+    "forms/input-date": true,
+    "forms/input-file": true,
+    "forms/input-range": true,
+    "forms/input-search": true,
+
+    // Components
+    "components/accordion": true,
+    "components/card": true,
+    "components/dropdown": true,
+    "components/group": true,
+    "components/loading": true,
+    "components/modal": true,
+    "components/nav": true,
+    "components/progress": true,
+    "components/tooltip": true,
+
+    // Utilities
+    "utilities/accessibility": true,
+    "utilities/reduce-motion": true
+  ),
+  $modules
+);
diff --git a/src/atoms/borders.scss b/src/atoms/borders.scss
deleted file mode 100644
index a552448..0000000
--- a/src/atoms/borders.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-
-$border-radius: (
-  none: 0px,
-  sm: 0.125rem,
-  DEFAULT: 0.25rem,
-  md: 0.375rem,
-  lg: 0.5rem,
-  xl: 0.75rem,
-  2xl: 1rem,
-  3xl: 1.5rem,
-  full: 9999px,
-);
-
-$border-width: (
-  0: 0px,
-  2: 2px,
-  4: 4px,
-  8: 8px,
-  DEFAULT: 1px,
-);
diff --git a/src/atoms/breakpoints.scss b/src/atoms/breakpoints.scss
deleted file mode 100644
index e29e33b..0000000
--- a/src/atoms/breakpoints.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-
-$screens: (
-  sm: 640px,
-  md: 768px,
-  lg: 1024px,
-  xl: 1280px,
-  2xl: 1536px,
-);
diff --git a/src/atoms/colors.scss b/src/atoms/colors.scss
deleted file mode 100644
index 51d2499..0000000
--- a/src/atoms/colors.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-
-$black: #000000;
-$white: #ffffff;
-
-$purple-50: #faf5ff;
-$purple-100: #f3e8ff;
-$purple-200: #e9d5ff;
-$purple-300: #d8b4fe;
-$purple-400: #c084fc;
-$purple-500: #a855f7;
-$purple-600: #9333ea;
-$purple-700: #7e22ce;
-$purple-800: #6b21a8;
-$purple-900: #581c87;
-
-$blue-50: #eff6ff;
-$blue-100: #dbeafe;
-$blue-200: #bfdbfe;
-$blue-300: #93c5fd;
-$blue-400: #60a5fa;
-$blue-500: #3b82f6;
-$blue-600: #2563eb;
-$blue-700: #1d4ed8;
-$blue-800: #1e40af;
-$blue-900: #1e3a8a;
-
-$green-50: #f0fdf4;
-$green-100: #dcfce7;
-$green-200: #bbf7d0;
-$green-300: #86efac;
-$green-400: #4ade80;
-$green-500: #22c55e;
-$green-600: #16a34a;
-$green-700: #15803d;
-$green-800: #166534;
-$green-900: #14532d;
-
-$yellow-50: #fefce8;
-$yellow-100: #fef9c3;
-$yellow-200: #fef08a;
-$yellow-300: #fde047;
-$yellow-400: #facc15;
-$yellow-500: #eab308;
-$yellow-600: #ca8a04;
-$yellow-700: #a16207;
-$yellow-800: #854d0e;
-$yellow-900: #713f12;
-
-$orange-50: #fff7ed;
-$orange-100: #ffedd5;
-$orange-200: #fed7aa;
-$orange-300: #fdba74;
-$orange-400: #fb923c;
-$orange-500: #f97316;
-$orange-600: #ea580c;
-$orange-700: #c2410c;
-$orange-800: #9a3412;
-$orange-900: #7c2d12;
-
-$red-50: #fef2f2;
-$red-100: #fee2e2;
-$red-200: #fecaca;
-$red-300: #fca5a5;
-$red-400: #f87171;
-$red-500: #ef4444;
-$red-600: #dc2626;
-$red-700: #b91c1c;
-$red-800: #991b1b;
-$red-900: #7f1d1d;
-
-$gray-10:  #f5fcff;
-$gray-25:  #fafafa;
-$gray-50:  #f5f5f5;
-$gray-100: #f0f0f0;
-$gray-200: #e5e5e5;
-$gray-250: #E8F7FE;
-$gray-300: #d6d6d6;
-$gray-400: #cccccc;
-$gray-500: #bbbbbb;
-$gray-600: #949494;
-$gray-700: #757575;
-$gray-800: #2f2f2f;
-$gray-900: #1e1e1e;
-
diff --git a/src/atoms/effects.scss b/src/atoms/effects.scss
deleted file mode 100644
index 0f27fce..0000000
--- a/src/atoms/effects.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-
-$box-shadow: (
-  sm: 0 1px 2px 0 rgb(0 0 0 / 0.05),
-  DEFAULT: (
-    0 1px 3px 0 rgb(0 0 0 / 0.1),
-    0 1px 2px 0 rgb(0 0 0 / 0.06),
-  ),
-  md: (
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -1px rgb(0 0 0 / 0.06),
-  ),
-  lg: (
-    0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -2px rgb(0 0 0 / 0.05),
-  ),
-  xl: (
-    0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 10px 10px -5px rgb(0 0 0 / 0.04),
-  ),
-  2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25),
-  inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06),
-  none: none,
-);
-
-$opacity: (
-  0: 0,
-  5: 0.05,
-  10: 0.1,
-  20: 0.2,
-  25: 0.25,
-  30: 0.3,
-  40: 0.4,
-  50: 0.5,
-  60: 0.6,
-  70: 0.7,
-  75: 0.75,
-  80: 0.8,
-  90: 0.9,
-  95: 0.95,
-  100: 1,
-);
diff --git a/src/atoms/flexbox.scss b/src/atoms/flexbox.scss
deleted file mode 100644
index 731d437..0000000
--- a/src/atoms/flexbox.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-$flex: (
-  1: 1 1 0%,
-  auto: 1 1 auto,
-  initial: 0 1 auto,
-  none: none,
-);
-
-$flex-grow: (
-  0: 0,
-  DEFAULT: 1,
-);
-
-$flex-shrink: (
-  0: 0,
-  DEFAULT: 1,
-);
-
-$order: (
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5,
-  6: 6,
-  7: 7,
-  8: 8,
-  9: 9,
-  10: 10,
-  11: 11,
-  12: 12,
-  first: -9999,
-  last: 9999,
-  none: 0,
-);
diff --git a/src/atoms/grid.scss b/src/atoms/grid.scss
deleted file mode 100644
index 699c9c4..0000000
--- a/src/atoms/grid.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-
-$grid-template-columns: (
-  1: (
-    repeat(1, minmax(0, 1fr)),
-  ),
-  2: (
-    repeat(2, minmax(0, 1fr)),
-  ),
-  3: (
-    repeat(3, minmax(0, 1fr)),
-  ),
-  4: (
-    repeat(4, minmax(0, 1fr)),
-  ),
-  5: (
-    repeat(5, minmax(0, 1fr)),
-  ),
-  6: (
-    repeat(6, minmax(0, 1fr)),
-  ),
-  7: (
-    repeat(7, minmax(0, 1fr)),
-  ),
-  8: (
-    repeat(8, minmax(0, 1fr)),
-  ),
-  9: (
-    repeat(9, minmax(0, 1fr)),
-  ),
-  10: (
-    repeat(10, minmax(0, 1fr)),
-  ),
-  11: (
-    repeat(11, minmax(0, 1fr)),
-  ),
-  12: (
-    repeat(12, minmax(0, 1fr)),
-  ),
-  none: none,
-);
-
-$grid-column: (
-  auto: auto,
-  span-1: span 1 / span 1,
-  span-2: span 2 / span 2,
-  span-3: span 3 / span 3,
-  span-4: span 4 / span 4,
-  span-5: span 5 / span 5,
-  span-6: span 6 / span 6,
-  span-7: span 7 / span 7,
-  span-8: span 8 / span 8,
-  span-9: span 9 / span 9,
-  span-10: span 10 / span 10,
-  span-11: span 11 / span 11,
-  span-12: span 12 / span 12,
-  span-full: 1 / -1,
-);
-
-$grid-column-start: (
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5,
-  6: 6,
-  7: 7,
-  8: 8,
-  9: 9,
-  10: 10,
-  11: 11,
-  12: 12,
-  13: 13,
-  auto: auto,
-);
-
-$grid-column-end: (
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5,
-  6: 6,
-  7: 7,
-  8: 8,
-  9: 9,
-  10: 10,
-  11: 11,
-  12: 12,
-  13: 13,
-  auto: auto,
-);
-
-$grid-template-rows: (
-  1: (
-    repeat(1, minmax(0, 1fr)),
-  ),
-  2: (
-    repeat(2, minmax(0, 1fr)),
-  ),
-  3: (
-    repeat(3, minmax(0, 1fr)),
-  ),
-  4: (
-    repeat(4, minmax(0, 1fr)),
-  ),
-  5: (
-    repeat(5, minmax(0, 1fr)),
-  ),
-  6: (
-    repeat(6, minmax(0, 1fr)),
-  ),
-  none: none,
-);
-
-$grid-row: (
-  auto: auto,
-  span-1: span 1 / span 1,
-  span-2: span 2 / span 2,
-  span-3: span 3 / span 3,
-  span-4: span 4 / span 4,
-  span-5: span 5 / span 5,
-  span-6: span 6 / span 6,
-  span-full: 1 / -1,
-);
-
-$grid-row-start: (
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5,
-  6: 6,
-  7: 7,
-  auto: auto,
-);
-
-$grid-row-end: (
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5,
-  6: 6,
-  7: 7,
-  auto: auto,
-);
diff --git a/src/atoms/index.scss b/src/atoms/index.scss
deleted file mode 100644
index 91bcacc..0000000
--- a/src/atoms/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "breakpoints";
-@import "colors";
-@import "spacing";
-@import "borders";
-@import "effects";
-@import "layout";
-@import "flexbox";
-@import "grid";
-@import "typography";
-@import "transitions";
-@import "sizing";
-@import "transforms";
diff --git a/src/atoms/layout.scss b/src/atoms/layout.scss
deleted file mode 100644
index 1d82377..0000000
--- a/src/atoms/layout.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-
-$z-index: (
-  0: 0,
-  10: 10,
-  20: 20,
-  30: 30,
-  40: 40,
-  50: 50,
-  auto: auto,
-);
diff --git a/src/atoms/sizing.scss b/src/atoms/sizing.scss
deleted file mode 100644
index 9fc95d3..0000000
--- a/src/atoms/sizing.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-
-$height: (
-  auto: auto,
-  "1/2": 50%,
-  "1/3": 33.333333%,
-  "2/3": 66.666667%,
-  "1/4": 25%,
-  "2/4": 50%,
-  "3/4": 75%,
-  "1/5": 20%,
-  "2/5": 40%,
-  "3/5": 60%,
-  "4/5": 80%,
-  "1/6": 16.666667%,
-  "2/6": 33.333333%,
-  "3/6": 50%,
-  "4/6": 66.666667%,
-  "5/6": 83.333333%,
-  full: 100%,
-  screen: 100vh,
-  min: min-content,
-  max: max-content,
-  fit: fit-content,
-);
-
-$max-width: (
-  0: 0rem,
-  none: none,
-  xs: 20rem,
-  sm: 24rem,
-  md: 28rem,
-  lg: 32rem,
-  xl: 36rem,
-  2xl: 42rem,
-  3xl: 48rem,
-  4xl: 56rem,
-  5xl: 64rem,
-  6xl: 72rem,
-  7xl: 80rem,
-  full: 100%,
-  min: min-content,
-  max: max-content,
-  fit: fit-content,
-  prose: 65ch,
-);
-
-$max-height: (
-  full: 100%,
-  screen: 100vh,
-  min: min-content,
-  max: max-content,
-  fit: fit-content,
-);
-
-$min-height: (
-  0: 0px,
-  full: 100%,
-  screen: 100vh,
-  min: min-content,
-  max: max-content,
-  fit: fit-content,
-);
-
-$min-width: (
-  0: 0px,
-  full: 100%,
-  min: min-content,
-  max: max-content,
-  fit: fit-content,
-);
-
-$width: (
-  auto: auto,
-  "1/2": 50%,
-  "1/3": 33.333333%,
-  "2/3": 66.666667%,
-  "1/4": 25%,
-  "2/4": 50%,
-  "3/4": 75%,
-  "1/5": 20%,
-  "2/5": 40%,
-  "3/5": 60%,
-  "4/5": 80%,
-  "1/6": 16.666667%,
-  "2/6": 33.333333%,
-  "3/6": 50%,
-  "4/6": 66.666667%,
-  "5/6": 83.333333%,
-  "1/12": 8.333333%,
-  "2/12": 16.666667%,
-  "3/12": 25%,
-  "4/12": 33.333333%,
-  "5/12": 41.666667%,
-  "6/12": 50%,
-  "7/12": 58.333333%,
-  "8/12": 66.666667%,
-  "9/12": 75%,
-  "10/12": 83.333333%,
-  "11/12": 91.666667%,
-  full: 100%,
-  screen: 100vw,
-  min: min-content,
-  max: max-content,
-  fit: fit-content,
-);
diff --git a/src/atoms/spacing.scss b/src/atoms/spacing.scss
deleted file mode 100644
index d3e8211..0000000
--- a/src/atoms/spacing.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-
-$spacing: (
-  0: 0px,
-  1: 0.25rem,
-  2: 0.5rem,
-  3: 0.75rem,
-  4: 1rem,
-  5: 1.25rem,
-  6: 1.5rem,
-  7: 1.75rem,
-  8: 2rem,
-  9: 2.25rem,
-  10: 2.5rem,
-  11: 2.75rem,
-  12: 3rem,
-  14: 3.5rem,
-  16: 4rem,
-  20: 5rem,
-  24: 6rem,
-  28: 7rem,
-  32: 8rem,
-  36: 9rem,
-  40: 10rem,
-  44: 11rem,
-  48: 12rem,
-  52: 13rem,
-  56: 14rem,
-  60: 15rem,
-  64: 16rem,
-  72: 18rem,
-  80: 20rem,
-  96: 24rem,
-  px: 1px,
-  0.5: 0.125rem,
-  1.5: 0.375rem,
-  2.5: 0.625rem,
-  3.5: 0.875rem,
-);
diff --git a/src/atoms/transforms.scss b/src/atoms/transforms.scss
deleted file mode 100644
index b709036..0000000
--- a/src/atoms/transforms.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-
-$scale: (
-  0: 0,
-  50: 0.5,
-  75: 0.75,
-  90: 0.9,
-  95: 0.95,
-  100: 1,
-  105: 1.05,
-  110: 1.1,
-  125: 1.25,
-  150: 1.5,
-);
-
-$rotate: (
-  0: 0deg,
-  1: 1deg,
-  2: 2deg,
-  3: 3deg,
-  6: 6deg,
-  12: 12deg,
-  45: 45deg,
-  90: 90deg,
-  180: 180deg,
-);
-
-$skew: (
-  0: 0deg,
-  1: 1deg,
-  2: 2deg,
-  3: 3deg,
-  6: 6deg,
-  12: 12deg,
-);
diff --git a/src/atoms/transitions.scss b/src/atoms/transitions.scss
deleted file mode 100644
index d171bb8..0000000
--- a/src/atoms/transitions.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-
-$transition-property: (
-  none: none,
-  all: all,
-  DEFAULT: (
-    background-color,
-    border-color,
-    color,
-    fill,
-    stroke,
-    opacity,
-    box-shadow,
-    transform,
-    filter,
-    backdrop-filter,
-  ),
-  colors: (
-    background-color,
-    border-color,
-    color,
-    fill,
-    stroke,
-  ),
-  opacity: opacity,
-  shadow: box-shadow,
-  transform: transform,
-);
-
-$transition-timing-function: (
-  DEFAULT: (
-    cubic-bezier(0.4, 0, 0.2, 1),
-  ),
-  linear: linear,
-  in: (
-    cubic-bezier(0.4, 0, 1, 1),
-  ),
-  out: (
-    cubic-bezier(0, 0, 0.2, 1),
-  ),
-  in-out: (
-    cubic-bezier(0.4, 0, 0.2, 1),
-  ),
-);
-
-$transition-duration: (
-  75: 75ms,
-  100: 100ms,
-  150: 150ms,
-  200: 200ms,
-  300: 300ms,
-  500: 500ms,
-  700: 700ms,
-  1000: 1000ms,
-  DEFAULT: 150ms,
-);
-
-$transition-delay: (
-  75: 75ms,
-  100: 100ms,
-  150: 150ms,
-  200: 200ms,
-  300: 300ms,
-  500: 500ms,
-  700: 700ms,
-  1000: 1000ms,
-);
diff --git a/src/atoms/typography.scss b/src/atoms/typography.scss
deleted file mode 100644
index 5834170..0000000
--- a/src/atoms/typography.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-
-$font-family: (
-  sans: (
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji",
-  ),
-  serif: (
-    ui-serif,
-    Georgia,
-    Cambria,
-    "Times New Roman",
-    Times,
-    serif,
-  ),
-  mono: (
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace,
-  ),
-);
-
-$font-size: (
-  xs: 0.75rem,
-  sm: 0.875rem,
-  base: 1rem,
-  lg: 1.125rem,
-  xl: 1.25rem,
-  2xl: 1.5rem,
-  3xl: 1.875rem,
-  4xl: 2.25rem,
-  5xl: 3rem,
-  6xl: 3.75rem,
-  7xl: 4.5rem,
-  8xl: 6rem,
-  9xl: 8rem,
-);
-
-$font-weight: (
-  thin: 100,
-  extralight: 200,
-  light: 300,
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800,
-  black: 900,
-);
-
-$letter-spacing: (
-  tighter: -0.05em,
-  tight: -0.025em,
-  normal: 0em,
-  wide: 0.025em,
-  wider: 0.05em,
-  widest: 0.1em,
-);
-
-$line-height: (
-  3: 0.75rem,
-  4: 1rem,
-  5: 1.25rem,
-  6: 1.5rem,
-  7: 1.75rem,
-  8: 2rem,
-  9: 2.25rem,
-  10: 2.5rem,
-  none: 1,
-  tight: 1.25,
-  snug: 1.375,
-  normal: 1.5,
-  relaxed: 1.625,
-  loose: 2,
-);
diff --git a/src/components/button.scss b/src/components/button.scss
deleted file mode 100644
index 05d4d67..0000000
--- a/src/components/button.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-$button-structure-border-width: 1px;
-$button-structure-border-style: solid;
-$button-structure-padding-inline: 10px;
-$button-structure-padding-block: 4px;
-$button-structure-min-width: max-content;
-$button-structure-width: auto;
-$button-structure-font-size: 14px;
-$button-structure-border-radius: 3px;
-$button-structure-line-height: 1.4;
-$button-structure-outline-size: 2px;
-$button-structure-icon-size: 1.4em;
-
-$button-transition-property: color, border-color, background-color;
-$button-transition-timing-function: ease-in-out;
-$button-transition-duration: 0.2s;
-
-$button-theme-border: $gray-300;
-$button-theme-value: $gray-800;
-$button-theme-background: $white;
-$button-theme-icon: $gray-900;
-
-$button-theme-border-hover: $blue-600;
-$button-theme-value-hover: $gray-800;
-$button-theme-background-hover: $white;
-$button-theme-icon-hover: $blue-600;
-$button-theme-outline-hover: $blue-600;
-
-
-$button-theme-border-focus: $blue-600;
-$button-theme-value-focus: $gray-800;
-$button-theme-background-focus: $white;
-$button-theme-icon-focus: $blue-600;
-$button-theme-outline-focus: $blue-600;
-
-$button-theme-border-focus-visible: $blue-400;
-$button-theme-value-focus-visible: $gray-800;
-$button-theme-background-focus-visible: $white;
-$button-theme-icon-focus-visible: $blue-600;
-$button-theme-outline-focus-visible: $blue-600;
-
-$button-theme-border-disabled: $gray-300;
-$button-theme-value-disabled: $gray-400;
-$button-theme-background-disabled: $gray-50;
-$button-theme-icon-disabled: $gray-400;
-
-input[type="submit"],
-input[type="button"],
-input[type="reset"],
-button[type="submit"],
-button[type="button"],
-button[type="reset"] {
-  --#{$prefix}color--button-background: $button-theme-background;
-  --#{$prefix}color--button-background-hovered: $button-theme-background-hover;
-  --#{$prefix}color--button-background-focused: $button-theme-background-focus;
-  --#{$prefix}color--button-background-disabled: $button-theme-background-disabled;
-  --#{$prefix}color--button-text: $button-theme-value;
-  --#{$prefix}color--button-text-hovered: $button-theme-value-hover;
-  --#{$prefix}color--button-text-focused: $button-theme-value-focus;
-  --#{$prefix}color--button-text-disabled: $button-theme-value-disabled;
-  --#{$prefix}color--button-border: $button-theme-border;
-  --#{$prefix}color--button-border-hovered: $button-theme-border-hover;
-  --#{$prefix}color--button-border-focused: $button-theme-border-focus;
-  --#{$prefix}color--button-border-outer-focused: $button-theme-outline-focus;
-  --#{$prefix}color--button-border-disabled: $button-theme-border-disabled;
-  
-  cursor: pointer;
-  background-color: var(--#{$prefix}color--button-background);
-  color: var(--#{$prefix}color--button-text);
-  border-width: $button-structure-border-width;
-  border-style: $button-structure-border-style;
-  border-color: var(--#{$prefix}color--button-border);
-  border-radius: $button-structure-border-radius;
-  text-align: center;
-  font-size: $button-structure-font-size;
-  line-height: $button-structure-line-height;
-  font-weight: bold;
-  display: inline-flex;
-  gap: 0.25em;
-  align-items: center;
-  justify-content: center;
-  padding-inline: $button-structure-padding-inline;
-  padding-block: $button-structure-padding-block;
-  min-width: $button-structure-min-width;
-  width: $button-structure-width;
-  transition-property: $button-transition-property;
-  transition-duration: $button-transition-duration; 
-  transition-timing-function: $button-transition-timing-function;
-
-  &:hover {
-    background-color: var(--#{$prefix}color--button-background-hovered);
-    color: var(--#{$prefix}color--button-text-hovered);
-    border-color: var(--#{$prefix}color--button-border-hovered);
-  }
-  &:focus {
-    background-color: var(--#{$prefix}color--button-background-focused);
-    color: var(--#{$prefix}color--button-text-focused);
-    border-color: var(--#{$prefix}color--button-border-focused);
-    box-shadow: 0 0 0 $button-structure-outline-size #fff, 0 0 0 calc($button-structure-outline-size*2) var(--#{$prefix}color--button-border-outer-focused);
-    outline: 2px solid #0000;
-    outline-offset: 2px;
-  }
-  &[disabled], &.disabled {
-    background-color: var(--#{$prefix}color--button-background-disabled);
-    color: var(--#{$prefix}color--button-text-disabled);
-    border-color: var(--#{$prefix}color--button-border-disabled);
-    cursor: not-allowed;
-  }
-}
\ No newline at end of file
diff --git a/src/components/index.scss b/src/components/index.scss
deleted file mode 100644
index 28a853f..0000000
--- a/src/components/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "input";
-@import "button";
diff --git a/src/components/input.scss b/src/components/input.scss
deleted file mode 100644
index 9b53052..0000000
--- a/src/components/input.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-@function encodecolor($string) {
-  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
-    $hex: str-slice(ie-hex-str($string), 4);
-    $string: unquote('#{$hex}');
-
-    @return '%23' + $string;
-  }
-
-  @return $string;
-}
-
-$label-structure-font-size: 11px;
-$label-theme-font-weight: 500;
-$label-theme-text: $gray-800;
-$label-theme-transform: uppercase;
-
-$input-structure-border-width: 1px;
-$input-structure-border-style: solid;
-$input-structure-padding-inline: 10px;
-$input-structure-padding-block: 4px;
-$input-structure-height: calc(3em - #{2 *  $input-structure-padding-block + 2 * $input-structure-border-width});
-$input-structure-min-width: 1px;
-$input-structure-width: calc(100% - #{2 *  $input-structure-padding-inline + 2 * $input-structure-border-width});
-$input-structure-font-size: 14px;
-$input-structure-border-radius: 3px;
-$input-structure-line-height: $input-structure-height;
-$input-structure-outline-size: 2px;
-$input-structure-margin-block: 0.5em 1em;
-$input-structure-icon-size: 24px;
-
-$input-option-structure-size: 20px;
-$input-option-structure-size-touch: 24px;
-$input-option-theme-background-focus: $blue-600;
-$input-option-theme-foreground-focus: $white;
-
-$input-transition-property: color, border-color, background-color;
-$input-transition-timing-function: ease-in-out;
-$input-transition-duration: 0.2s;
-
-$input-theme-border: $gray-300;
-$input-theme-value: $gray-800;
-$input-theme-background: $white;
-$input-theme-icon: $gray-900;
-$input-theme-placeholder: $gray-500;
-
-$input-theme-border-focus: $blue-600;
-$input-theme-value-focus: $gray-800;
-$input-theme-background-focus: $white;
-$input-theme-icon-focus: $blue-600;
-$input-theme-placeholder-focus: $gray-500;
-$input-theme-outline-focus: $blue-600;
-
-$input-theme-border-focus-visible: $blue-400;
-$input-theme-value-focus-visible: $gray-800;
-$input-theme-background-focus-visible: $white;
-$input-theme-icon-focus-visible: $blue-600;
-$input-theme-placeholder-focus-visible: $gray-500;
-$input-theme-outline-focus-visible: $blue-600;
-
-$input-theme-border-disabled: $gray-300;
-$input-theme-value-disabled: $gray-400;
-$input-theme-background-disabled: $gray-50;
-$input-theme-icon-disabled: $gray-400;
-$input-theme-placeholder-disabled: $gray-300;
-
-$input-theme-border-invalid: $red-400;
-$input-theme-value-invalid: $gray-800;
-$input-theme-background-invalid: $white;
-$input-theme-icon-invalid: $red-500;
-$input-theme-placeholder-invalid: $gray-500;
-
-
-
-label {
-  display: block;
-  font-size: $label-structure-font-size;
-  font-weight: $label-theme-font-weight;
-  color: $label-theme-text; 
-  text-transform: $label-theme-transform;
-}
-
-label:has(input[type="checkbox"]), label:has(input[type="radio"]), input[type="checkbox"] + label, input[type="radio"] + label {
-  text-transform: unset;
-  font-size: inherit;
-}
-
-input[type="text"], 
-input[type="number"], 
-input[type="url"], 
-input[type="search"], 
-input[type="date"], 
-input[type="month"], 
-input[type="week"], 
-input[type="time"], 
-input[type="datetime"], 
-input[type="datetime-local"], 
-input[type="email"], 
-input[type="tel"], 
-input[type="password"] {
-  height: $input-structure-height;
-}
-  
-input[type="text"], 
-input[type="number"], 
-input[type="url"], 
-input[type="search"], 
-input[type="date"], 
-input[type="month"], 
-input[type="week"], 
-input[type="time"], 
-input[type="datetime"], 
-input[type="datetime-local"], 
-input[type="email"], 
-input[type="tel"], 
-input[type="password"], 
-select,
-textarea {
-  box-sizing: content-box;
-  font-size: $input-structure-font-size;
-  line-height: $input-structure-line-height;
-  font-family: inherit;
-  padding-inline: $input-structure-padding-inline;
-  padding-block: $input-structure-padding-block;
-  margin-block: $input-structure-margin-block;
-  --#{$prefix}input--border: #{$input-theme-border};
-  --#{$prefix}input--background: #{$input-theme-background};
-  --#{$prefix}input--text: #{$input-theme-value};
-  --#{$prefix}input--placeholder: #{$input-theme-placeholder};
-  border: $input-structure-border-width $input-structure-border-style $input-structure-border-width;
-  border-radius: $input-structure-border-radius;
-  background-color: var(--#{$prefix}input--background);
-  min-width: $input-structure-min-width;
-  width: $input-structure-width;
-  max-width: $input-structure-width;
-  min-height: $input-structure-height;
-  transition-property: $input-transition-property;
-  transition-duration: $input-transition-duration; 
-  transition-timing-function: $input-transition-timing-function;
-
-  &::placeholder {
-    color: var(--#{$prefix}input--placeholder);
-  }
-  &:focus, &:focus-within {
-    --#{$prefix}input--border: #{$input-theme-border-focus};
-    --#{$prefix}input--background: #{$input-theme-background-focus};
-    --#{$prefix}input--text: #{$input-theme-value-focus};
-    --#{$prefix}input--placeholder: #{$input-theme-placeholder-focus};
-    box-shadow: $input-structure-border-width 0 $input-theme-outline-focus;
-    outline: 2px solid #0000;
-    outline-offset: 2px;
-  }
-  &[disabled] {
-    --#{$prefix}input--border: #{$input-theme-border-disabled};
-    --#{$prefix}input--background: #{$input-theme-background-disabled};
-    --#{$prefix}input--text: #{$input-theme-value-disabled};
-    --#{$prefix}input--placeholder: #{$input-theme-placeholder-disabled};
-  }
-  &:invalid {
-    --#{$prefix}input--border: #{$input-theme-border-invalid};
-    --#{$prefix}input--background: #{$input-theme-background-invalid};
-    --#{$prefix}input--text: #{$input-theme-value-invalid};
-    --#{$prefix}input--placeholder: #{$input-theme-placeholder-invalid};
-  }
-}
-select:not([multiple]) {
-  -webkit-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{encodecolor($input-theme-icon)}' d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z' %3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right #{$input-structure-padding-inline} top 50%;
-  background-size: auto;
-  background-size: $input-structure-icon-size auto;
-  padding-right: calc(1em + $input-structure-padding-inline);
-  width: calc(100% - #{2 *  $input-structure-padding-inline + 2 * $input-structure-border-width} - 1em);
-  max-width: calc(100% - #{2 *  $input-structure-padding-inline + 2 * $input-structure-border-width} - 1em);
-}
-select:focus-visible, input[type="radio"]:focus, input[type="checkbox"]:focus {
-  outline: 1px solid transparent;
-  --#{$prefix}input--border: #{$input-theme-border-focus-visible};
-  --#{$prefix}input--background: #{$input-theme-background-focus-visible};
-  --#{$prefix}input--text: #{$input-theme-value-focus-visible};
-  --#{$prefix}input--placeholder: #{$input-theme-placeholder-focus-visible};
-  box-shadow: 0 0 0 $input-structure-outline-size #fff, 0 0 0 calc($input-structure-outline-size*2) $input-theme-outline-focus-visible;
-  outline: 2px solid #0000;
-  outline-offset: 2px;
-}
-
-input[type=checkbox],
-input[type=radio] {
-  --#{$prefix}input--border: #{$input-theme-border};
-  --#{$prefix}input--background: #{$input-theme-background};
-  --#{$prefix}input--text: #{$input-theme-value};
-  --#{$prefix}input--placeholder: #{$input-theme-placeholder};
-  border: $input-structure-border-width $input-structure-border-style $input-structure-border-width;
-  margin: #{$input-structure-border-width * -1} 0.25em 0 #{$input-structure-border-width * -1};
-  background-color: var(--#{$prefix}input--background);
-  color: var(--#{$prefix}input-text);
-  display: inline-flex;
-  line-height: 1;
-  text-align: center;
-  vertical-align: middle;
-  width:$input-option-structure-size;
-  height:$input-option-structure-size;
-  min-width:$input-option-structure-size;
-  -webkit-appearance: none;
-  transition: $input-transition-property $input-transition-duration $input-transition-timing-function;
-
-  &:checked {
-    background-color: $input-option-theme-background-focus;
-    border-color: $input-option-theme-background-focus;
-    color: $input-option-theme-foreground-focus;
-  }
-  &:checked::before {
-    margin: auto;
-  }
-}
-input[type=checkbox] {
-  border-radius: $input-structure-border-radius;
-  &:checked::before {
-    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{encodecolor($input-option-theme-foreground-focus)}' d='m16.7 7.1-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' /%3E%3C/svg%3E");
-    speak:never;
-    -webkit-font-smoothing:antialiased;
-    -moz-osx-font-smoothing:grayscale;
-    height: unset;
-    float: unset;
-    margin: #{$input-structure-border-width - 4px};
-    width: calc(100% + #{2 * $input-structure-border-width + 4px});
-  }
-}
-input[type=radio] {             
-  border-radius: 100%;
-
-  &:checked::before {
-    content:"";
-    background-color:currentcolor;
-    border-radius: inherit;
-    width:.5rem;
-    height:.5rem;
-  }
-}
diff --git a/src/index.scss b/src/index.scss
deleted file mode 100644
index accf31d..0000000
--- a/src/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$prefix: tgbl-;
-
-.#{$prefix}interface {
-  @import "atoms";
-  @import "reset";
-  @import "components";
-}
\ No newline at end of file
diff --git a/src/reset.scss b/src/reset.scss
deleted file mode 100644
index 4de60dd..0000000
--- a/src/reset.scss
+++ /dev/null
@@ -1,359 +0,0 @@
-// Reset styles based on https://raw.githubusercontent.com/tailwindlabs/tailwindcss/master/src/css/preflight.css
-
-.#{$prefix}reset {
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-*/
-
-line-height: 1.5; /* 1 */
--webkit-text-size-adjust: 100%; /* 2 */
--moz-tab-size: 4; /* 3 */
-tab-size: 4; /* 3 */
-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
-font-feature-settings: normal; /* 5 */
-font-variation-settings: normal; /* 6 */
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-margin: 0; /* 1 */
-line-height: inherit; /* 2 */
-
-/*
-Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-*/
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-size: inherit; /* 2 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-3. Set the cursor to pointer for buttons.
-*/
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
-  cursor: pointer; /* 3 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-*/
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-}
-
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden] {
-  display: none;
-}
-  
-}
diff --git a/tangible.config.js b/tangible.config.js
index 10ee9b0..1148efa 100644
--- a/tangible.config.js
+++ b/tangible.config.js
@@ -1,8 +1,16 @@
 export default {
   build: [
     {
-      src: './src/index.scss',
+      src: './index.scss',
       dest: './build/design.min.css',
-    }
-  ]
+    },
+    {
+      src: './index.html',
+      dest: './build',
+    },
+  ],
+  serve: {
+    dir: 'build',
+    port: 3535
+  }
 }
diff --git a/themes/default.scss b/themes/default.scss
new file mode 100644
index 0000000..dce217b
--- /dev/null
+++ b/themes/default.scss
@@ -0,0 +1,5 @@
+// Styles
+@use "default/styles";
+
+// Colors schemes
+@use "default/schemes";
diff --git a/themes/default/dark.scss b/themes/default/dark.scss
new file mode 100644
index 0000000..6f30384
--- /dev/null
+++ b/themes/default/dark.scss
@@ -0,0 +1,255 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../functions";
+@use "theme-colors";
+
+// Default: Dark theme
+@mixin theme {
+  #{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-200};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-450};
+  #{$css-var-prefix}muted-border-color: #{$slate-850};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "dark");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$zinc-350};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$zinc-250};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-550};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-100};
+  #{$css-var-prefix}contrast-background: #{$slate-50};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$white};
+  #{$css-var-prefix}contrast-hover-background: #{$white};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$black};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-50};
+    #{$css-var-prefix}h2-color: #{$zinc-100};
+    #{$css-var-prefix}h3-color: #{$zinc-200};
+    #{$css-var-prefix}h4-color: #{$zinc-250};
+    #{$css-var-prefix}h5-color: #{$zinc-300};
+    #{$css-var-prefix}h6-color: #{$zinc-400};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{$azure-750};
+    #{$css-var-prefix}mark-color: #{$white};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
+    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-400};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
+    #{$css-var-prefix}form-element-border-color: #{$slate-800};
+    #{$css-var-prefix}form-element-color: #{$zinc-100};
+    #{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
+    #{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-750};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-850};
+    #{$css-var-prefix}range-active-border-color: #{$slate-800};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: #{$slate-900};
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$slate-900};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-850};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-850};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Document
+  color-scheme: dark;
+
+  /**
+   * Following nested rules must come after declarations to prevent Sass deprecation warning
+   * @see https://sass-lang.com/d/mixed-decls
+   */
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to black for .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+        &.contrast:is(
+            button,
+            [type="submit"],
+            [type="button"],
+            [type="reset"],
+            [role="button"]
+          ):not(.outline) {
+          &::before {
+            filter: brightness(0);
+          }
+        }
+      }
+    }
+  }
+
+  @if map.get($modules, "forms/basics") {
+    // Focus for buttons, radio and select
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  // Chevron icons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    // Change the icon color to black for accordion and dropdown .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} details {
+        summary {
+          &[role="button"].contrast:not(.outline) {
+            &::after {
+              filter: brightness(0);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/default/light.scss b/themes/default/light.scss
new file mode 100644
index 0000000..a6b366d
--- /dev/null
+++ b/themes/default/light.scss
@@ -0,0 +1,220 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../functions";
+@use "theme-colors";
+
+// Default: Light theme
+@mixin theme {
+  #{$css-var-prefix}background-color: #{$white};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-750};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-550};
+  #{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "light");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$slate-550};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-900};
+  #{$css-var-prefix}contrast-background: #{$slate-900};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$black};
+  #{$css-var-prefix}contrast-hover-background: #{$black};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$white};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow($slate-400);
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-800};
+    #{$css-var-prefix}h2-color: #{$zinc-750};
+    #{$css-var-prefix}h3-color: #{$zinc-700};
+    #{$css-var-prefix}h4-color: #{$zinc-650};
+    #{$css-var-prefix}h5-color: #{$zinc-600};
+    #{$css-var-prefix}h6-color: #{$zinc-550};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
+    #{$css-var-prefix}mark-color: #{$zinc-950};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
+    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-550};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
+    #{$css-var-prefix}form-element-border-color: #{$slate-150};
+    #{$css-var-prefix}form-element-color: #{$zinc-850};
+    #{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
+    #{$css-var-prefix}form-element-active-background-color: #{$white};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-200};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-100};
+    #{$css-var-prefix}range-active-border-color: #{$slate-200};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$white};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-50};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-100};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Document
+  color-scheme: light;
+
+  /**
+   * Following nested rules must come after declarations to prevent Sass deprecation warning
+   * @see https://sass-lang.com/d/mixed-decls
+   */
+
+  @if map.get($modules, "forms/basics") {
+    // Focus for buttons, radio and select
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+}
diff --git a/themes/default/schemes.scss b/themes/default/schemes.scss
new file mode 100644
index 0000000..493cd39
--- /dev/null
+++ b/themes/default/schemes.scss
@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "../../settings" as *;
+
+@use "light";
+@use "dark";
+
+@if map.get($modules, "themes/default") {
+  /**
+   * Color schemes
+   */
+
+  // Light color scheme (Default)
+  // Can be forced with data-theme="light"
+  [data-theme="light"],
+  :root:not([data-theme="dark"]) {
+    @include light.theme;
+  }
+
+  // Dark color scheme (Auto)
+  // Automatically enabled if user has Dark mode enabled
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      @include dark.theme;
+    }
+  }
+
+  // Dark color scheme (Forced)
+  // Enabled if forced with data-theme="dark"
+  [data-theme="dark"] {
+    @include dark.theme;
+  }
+
+  #{$parent-selector} progress,
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"],
+  #{$parent-selector} [type="range"] {
+    accent-color: var(#{$css-var-prefix}primary);
+  }
+}
diff --git a/themes/default/styles.scss b/themes/default/styles.scss
new file mode 100644
index 0000000..1560257
--- /dev/null
+++ b/themes/default/styles.scss
@@ -0,0 +1,433 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../functions";
+@use "theme-colors";
+
+@if map.get($modules, "themes/default") {
+  /**
+   * Styles
+   */
+
+  :root {
+    // Typography
+    #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+      "Noto Color Emoji";
+    #{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu,
+      Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
+      var(#{$css-var-prefix}font-family-emoji);
+    #{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+      Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
+    #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
+    #{$css-var-prefix}line-height: 1.5;
+    #{$css-var-prefix}font-weight: 400;
+    #{$css-var-prefix}font-size: 100%;
+    #{$css-var-prefix}text-underline-offset: 0.1rem;
+
+    // Borders
+    #{$css-var-prefix}border-radius: 0.25rem;
+    #{$css-var-prefix}border-width: 0.0625rem;
+    #{$css-var-prefix}outline-width: 0.125rem;
+
+    // Transitions
+    #{$css-var-prefix}transition: 0.2s ease-in-out;
+
+    // Spacings
+    #{$css-var-prefix}spacing: 1rem;
+
+    // Spacings for typography elements
+    @if map.get($modules, "content/typography") {
+      #{$css-var-prefix}typography-spacing-vertical: 1rem;
+    }
+
+    // Spacings for body > header, body > main, body > footer, section, article
+    @if map.get($modules, "layout/landmarks") or
+      map.get($modules, "layout/section") or
+      map.get($modules, "components/card") or
+      map.get($modules, "components/modal")
+    {
+      #{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
+      #{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
+    }
+
+    @if map.get($modules, "layout/grid") and $enable-classes {
+      #{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
+      #{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
+    }
+
+    // Spacings for form elements and button
+    @if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
+      #{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
+      #{$css-var-prefix}form-element-spacing-horizontal: 1rem;
+    }
+
+    // Font weight for form labels & fieldsets legend
+    @if map.get($modules, "forms/basic") {
+      #{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
+    }
+
+    // Group (role="group")
+    @if map.get($modules, "components/group") {
+      #{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+      #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}primary-focus);
+      #{$css-var-prefix}group-box-shadow-focus-with-input: 0
+        0
+        0
+        0.0625rem
+        var(#{$css-var-prefix}form-element-border-color);
+    }
+
+    // Modal (<dialog>)
+    @if map.get($modules, "components/modal") {
+      #{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
+    }
+
+    // Spacings for nav component
+    @if map.get($modules, "components/nav") {
+      #{$css-var-prefix}nav-element-spacing-vertical: 1rem;
+      #{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
+      #{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
+      #{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
+      #{$css-var-prefix}nav-breadcrumb-divider: ">";
+    }
+
+    // Checkboxes icons
+    @if map.get($modules, "forms/checkbox-radio-switch") {
+      #{$css-var-prefix}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+      #{$css-var-prefix}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Chevron icons
+    @if map.get($modules, "forms/basics") or
+      map.get($modules, "components/accordion") or
+      map.get($modules, "components/dropdown")
+    {
+      #{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    }
+
+    // Datetime icons
+    @if map.get($modules, "forms/input-date") {
+      #{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+      #{$css-var-prefix}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    }
+
+    // Search icon
+    @if map.get($modules, "forms/input-search") {
+      #{$css-var-prefix}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Close icon
+    @if map.get($modules, "components/modal") {
+      #{$css-var-prefix}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Loading icon (animated)
+    @if map.get($modules, "components/loading") {
+      // Inspired by https://codepen.io/aleksander351/pen/KzgKPo
+      #{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+    }
+
+    // Responsive root font size
+    @if $enable-responsive-typography {
+      @each $key, $values in $breakpoints {
+        @if $values {
+          @media (min-width: map.get($values, "breakpoint")) {
+            #{$css-var-prefix}font-size: map.get($values, "root-font-size");
+          }
+        }
+      }
+    }
+  }
+
+  // Responsives spacings
+  @if $enable-responsive-spacings {
+    // Landmarks and section
+    @if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
+      #{$semantic-root-element} > header,
+      #{$semantic-root-element} > main,
+      #{$semantic-root-element} > footer,
+      section {
+        @each $key, $values in $breakpoints {
+          @if $values {
+            @media (min-width: map.get($values, "breakpoint")) {
+              $multiplier: 1;
+              @if $key == "sm" {
+                $multiplier: 1.25;
+              } @else if $key == "md" {
+                $multiplier: 1.5;
+              } @else if $key == "lg" {
+                $multiplier: 1.75;
+              } @else if $key == "xl" {
+                $multiplier: 2;
+              } @else if $key == "xxl" {
+                $multiplier: 2.25;
+              }
+
+              #{$css-var-prefix}block-spacing-vertical: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+            }
+          }
+        }
+      }
+    }
+
+    // Card (<article>)
+    @if map.get($modules, "components/card") {
+      article {
+        @each $key, $values in $breakpoints {
+          @if $values {
+            @media (min-width: map.get($values, "breakpoint")) {
+              $multiplier: 1;
+              @if $key == "sm" {
+                $multiplier: 1.25;
+              } @else if $key == "md" {
+                $multiplier: 1.5;
+              } @else if $key == "lg" {
+                $multiplier: 1.75;
+              } @else if $key == "xl" {
+                $multiplier: 2;
+              } @else if $key == "xxl" {
+                $multiplier: 2.25;
+              }
+
+              #{$css-var-prefix}block-spacing-vertical: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+              #{$css-var-prefix}block-spacing-horizontal: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Link
+  @if map.get($modules, "content/link") {
+    a {
+      #{$css-var-prefix}text-decoration: underline;
+
+      // Secondary & Contrast
+      @if $enable-classes {
+        &.secondary,
+        &.contrast {
+          #{$css-var-prefix}text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Small
+    small {
+      #{$css-var-prefix}font-size: 0.875em;
+    }
+
+    // Headings
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      #{$css-var-prefix}font-weight: 700;
+    }
+
+    h1 {
+      #{$css-var-prefix}font-size: 2rem;
+      #{$css-var-prefix}line-height: 1.125;
+      #{$css-var-prefix}typography-spacing-top: 3rem;
+    }
+
+    h2 {
+      #{$css-var-prefix}font-size: 1.75rem;
+      #{$css-var-prefix}line-height: 1.15;
+      #{$css-var-prefix}typography-spacing-top: 2.625rem;
+    }
+
+    h3 {
+      #{$css-var-prefix}font-size: 1.5rem;
+      #{$css-var-prefix}line-height: 1.175;
+      #{$css-var-prefix}typography-spacing-top: 2.25rem;
+    }
+
+    h4 {
+      #{$css-var-prefix}font-size: 1.25rem;
+      #{$css-var-prefix}line-height: 1.2;
+      #{$css-var-prefix}typography-spacing-top: 1.874rem;
+    }
+
+    h5 {
+      #{$css-var-prefix}font-size: 1.125rem;
+      #{$css-var-prefix}line-height: 1.225;
+      #{$css-var-prefix}typography-spacing-top: 1.6875rem;
+    }
+
+    h6 {
+      #{$css-var-prefix}font-size: 1rem;
+      #{$css-var-prefix}line-height: 1.25;
+      #{$css-var-prefix}typography-spacing-top: 1.5rem;
+    }
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    thead,
+    tfoot {
+      th,
+      td {
+        #{$css-var-prefix}font-weight: 600;
+        #{$css-var-prefix}border-width: 0.1875rem;
+      }
+    }
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    pre,
+    code,
+    kbd,
+    samp {
+      #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
+    }
+
+    kbd {
+      #{$css-var-prefix}font-weight: bolder;
+    }
+  }
+
+  // Inputs and Selects
+  input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ),
+  :where(select, textarea) {
+    #{$css-var-prefix}outline-width: 0.0625rem;
+  }
+
+  [type="search"] {
+    #{$css-var-prefix}border-radius: 5rem;
+  }
+
+  // Checkboxes, Radios and Switches
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    [type="checkbox"],
+    [type="radio"] {
+      #{$css-var-prefix}border-width: 0.125rem;
+    }
+
+    [type="checkbox"][role="switch"] {
+      #{$css-var-prefix}border-width: 0.1875rem;
+    }
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    details.dropdown {
+      summary:not([role="button"]) {
+        #{$css-var-prefix}outline-width: 0.0625rem;
+      }
+    }
+    nav {
+      details.dropdown {
+        summary:focus-visible {
+          #{$css-var-prefix}outline-width: 0.125rem;
+        }
+      }
+    }
+  }
+
+  // Group (role="group")
+  @if map.get($modules, "components/group") {
+    [role="search"] {
+      #{$css-var-prefix}border-radius: 5rem;
+    }
+
+    [role="search"],
+    [role="group"] {
+      @if $enable-classes {
+        &:has(
+            button.secondary:focus,
+            [type="submit"].secondary:focus,
+            [type="button"].secondary:focus,
+            [role="button"].secondary:focus
+          ) {
+          #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}secondary-focus);
+        }
+
+        &:has(
+            button.contrast:focus,
+            [type="submit"].contrast:focus,
+            [type="button"].contrast:focus,
+            [role="button"].contrast:focus
+          ) {
+          #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}contrast-focus);
+        }
+      }
+
+      button,
+      [type="submit"],
+      [type="button"],
+      [role="button"] {
+        #{$css-var-prefix}form-element-spacing-horizontal: 2rem;
+      }
+    }
+  }
+
+  // Chevron icons
+  // Change the icon color to white for accordion and dropdown buttons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    #{$parent-selector} details {
+      summary {
+        $selector: '&[role="button"]';
+        @if $enable-classes {
+          $selector: "#{$selector}:not(.outline)";
+        }
+        #{$selector} {
+          &::after {
+            filter: brightness(0) invert(1);
+          }
+        }
+      }
+    }
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to white for buttons
+    #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+      $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
+      @if $enable-classes {
+        $selector: "#{$selector}:not(.outline)";
+      }
+      #{$selector} {
+        &::before {
+          @if theme-colors.get("primary-inverse", "dark") == $white {
+            filter: brightness(0) invert(1);
+          } @else {
+            filter: brightness(0) invert(0);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/default/theme-colors.scss b/themes/default/theme-colors.scss
new file mode 100644
index 0000000..015d5be
--- /dev/null
+++ b/themes/default/theme-colors.scss
@@ -0,0 +1,490 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+
+$color-mappings: (
+  "amber": (
+    "dark": (
+      "text-selection-color": rgba($amber-350, 0.1875),
+      "primary": $amber-350,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-350, 0.5),
+      "primary-hover": $amber-250,
+      "primary-hover-background": $amber-150,
+      "primary-focus": rgba($amber-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($amber-400, 0.25),
+      "primary": $amber-550,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-550, 0.5),
+      "primary-hover": $amber-650,
+      "primary-hover-background": $amber-250,
+      "primary-focus": rgba($amber-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "azure": (
+    "dark": (
+      "text-selection-color": rgba($azure-350, 0.1875),
+      "primary": $azure-350,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-350, 0.5),
+      "primary-hover": $azure-250,
+      "primary-hover-background": $azure-500,
+      "primary-focus": rgba($azure-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($azure-400, 0.25),
+      "primary": $azure-550,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-550, 0.5),
+      "primary-hover": $azure-650,
+      "primary-hover-background": $azure-600,
+      "primary-focus": rgba($azure-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "blue": (
+    "dark": (
+      "text-selection-color": rgba($blue-350, 0.1875),
+      "primary": $blue-350,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-350, 0.5),
+      "primary-hover": $blue-250,
+      "primary-hover-background": $blue-500,
+      "primary-focus": rgba($blue-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($blue-400, 0.25),
+      "primary": $blue-550,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-550, 0.5),
+      "primary-hover": $blue-650,
+      "primary-hover-background": $blue-600,
+      "primary-focus": rgba($blue-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "cyan": (
+    "dark": (
+      "text-selection-color": rgba($cyan-350, 0.1875),
+      "primary": $cyan-350,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-350, 0.5),
+      "primary-hover": $cyan-250,
+      "primary-hover-background": $cyan-500,
+      "primary-focus": rgba($cyan-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($cyan-400, 0.25),
+      "primary": $cyan-550,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-550, 0.5),
+      "primary-hover": $cyan-650,
+      "primary-hover-background": $cyan-600,
+      "primary-focus": rgba($cyan-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "fuchsia": (
+    "dark": (
+      "text-selection-color": rgba($fuchsia-350, 0.1875),
+      "primary": $fuchsia-350,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-350, 0.5),
+      "primary-hover": $fuchsia-250,
+      "primary-hover-background": $fuchsia-500,
+      "primary-focus": rgba($fuchsia-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($fuchsia-400, 0.25),
+      "primary": $fuchsia-550,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-550, 0.5),
+      "primary-hover": $fuchsia-650,
+      "primary-hover-background": $fuchsia-600,
+      "primary-focus": rgba($fuchsia-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "green": (
+    "dark": (
+      "text-selection-color": rgba($green-350, 0.1875),
+      "primary": $green-350,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-350, 0.5),
+      "primary-hover": $green-250,
+      "primary-hover-background": $green-450,
+      "primary-focus": rgba($green-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($green-400, 0.25),
+      "primary": $green-550,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-550, 0.5),
+      "primary-hover": $green-650,
+      "primary-hover-background": $green-550,
+      "primary-focus": rgba($green-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "grey": (
+    "dark": (
+      "text-selection-color": rgba($grey-350, 0.1875),
+      "primary": $grey-350,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-350, 0.5),
+      "primary-hover": $grey-250,
+      "primary-hover-background": $grey-250,
+      "primary-focus": rgba($grey-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($grey-400, 0.25),
+      "primary": $grey-550,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-550, 0.5),
+      "primary-hover": $grey-650,
+      "primary-hover-background": $grey-350,
+      "primary-focus": rgba($grey-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "indigo": (
+    "dark": (
+      "text-selection-color": rgba($indigo-350, 0.1875),
+      "primary": $indigo-350,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-350, 0.5),
+      "primary-hover": $indigo-250,
+      "primary-hover-background": $indigo-550,
+      "primary-focus": rgba($indigo-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($indigo-400, 0.25),
+      "primary": $indigo-550,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-550, 0.5),
+      "primary-hover": $indigo-650,
+      "primary-hover-background": $indigo-650,
+      "primary-focus": rgba($indigo-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "jade": (
+    "dark": (
+      "text-selection-color": rgba($jade-350, 0.1875),
+      "primary": $jade-350,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-350, 0.5),
+      "primary-hover": $jade-250,
+      "primary-hover-background": $jade-500,
+      "primary-focus": rgba($jade-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($jade-400, 0.25),
+      "primary": $jade-550,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-550, 0.5),
+      "primary-hover": $jade-650,
+      "primary-hover-background": $jade-600,
+      "primary-focus": rgba($jade-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "lime": (
+    "dark": (
+      "text-selection-color": rgba($lime-350, 0.1875),
+      "primary": $lime-350,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-350, 0.5),
+      "primary-hover": $lime-250,
+      "primary-hover-background": $lime-150,
+      "primary-focus": rgba($lime-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($lime-400, 0.25),
+      "primary": $lime-550,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-550, 0.5),
+      "primary-hover": $lime-650,
+      "primary-hover-background": $lime-250,
+      "primary-focus": rgba($lime-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "orange": (
+    "dark": (
+      "text-selection-color": rgba($orange-350, 0.1875),
+      "primary": $orange-350,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-350, 0.5),
+      "primary-hover": $orange-250,
+      "primary-hover-background": $orange-450,
+      "primary-focus": rgba($orange-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($orange-400, 0.25),
+      "primary": $orange-550,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-550, 0.5),
+      "primary-hover": $orange-650,
+      "primary-hover-background": $orange-550,
+      "primary-focus": rgba($orange-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pink": (
+    "dark": (
+      "text-selection-color": rgba($pink-350, 0.1875),
+      "primary": $pink-350,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-350, 0.5),
+      "primary-hover": $pink-250,
+      "primary-hover-background": $pink-450,
+      "primary-focus": rgba($pink-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($pink-400, 0.25),
+      "primary": $pink-550,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-550, 0.5),
+      "primary-hover": $pink-650,
+      "primary-hover-background": $pink-550,
+      "primary-focus": rgba($pink-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pumpkin": (
+    "dark": (
+      "text-selection-color": rgba($pumpkin-350, 0.1875),
+      "primary": $pumpkin-350,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-350, 0.5),
+      "primary-hover": $pumpkin-250,
+      "primary-hover-background": $pumpkin-250,
+      "primary-focus": rgba($pumpkin-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($pumpkin-400, 0.25),
+      "primary": $pumpkin-550,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-550, 0.5),
+      "primary-hover": $pumpkin-650,
+      "primary-hover-background": $pumpkin-350,
+      "primary-focus": rgba($pumpkin-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "purple": (
+    "dark": (
+      "text-selection-color": rgba($purple-350, 0.1875),
+      "primary": $purple-350,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-350, 0.5),
+      "primary-hover": $purple-250,
+      "primary-hover-background": $purple-550,
+      "primary-focus": rgba($purple-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($purple-400, 0.25),
+      "primary": $purple-550,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-550, 0.5),
+      "primary-hover": $purple-650,
+      "primary-hover-background": $purple-650,
+      "primary-focus": rgba($purple-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "red": (
+    "dark": (
+      "text-selection-color": rgba($red-350, 0.1875),
+      "primary": $red-350,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-350, 0.5),
+      "primary-hover": $red-250,
+      "primary-hover-background": $red-500,
+      "primary-focus": rgba($red-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($red-400, 0.25),
+      "primary": $red-550,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-550, 0.5),
+      "primary-hover": $red-650,
+      "primary-hover-background": $red-600,
+      "primary-focus": rgba($red-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "sand": (
+    "dark": (
+      "text-selection-color": rgba($sand-350, 0.1875),
+      "primary": $sand-350,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-350, 0.5),
+      "primary-hover": $sand-250,
+      "primary-hover-background": $sand-150,
+      "primary-focus": rgba($sand-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($sand-400, 0.25),
+      "primary": $sand-550,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-550, 0.5),
+      "primary-hover": $sand-650,
+      "primary-hover-background": $sand-250,
+      "primary-focus": rgba($sand-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "slate": (
+    "dark": (
+      "text-selection-color": rgba($slate-350, 0.1875),
+      "primary": $slate-350,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-350, 0.5),
+      "primary-hover": $slate-250,
+      "primary-hover-background": $slate-550,
+      "primary-focus": rgba($slate-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($slate-400, 0.25),
+      "primary": $slate-550,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-550, 0.5),
+      "primary-hover": $slate-650,
+      "primary-hover-background": $slate-650,
+      "primary-focus": rgba($slate-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "violet": (
+    "dark": (
+      "text-selection-color": rgba($violet-350, 0.1875),
+      "primary": $violet-350,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-350, 0.5),
+      "primary-hover": $violet-250,
+      "primary-hover-background": $violet-550,
+      "primary-focus": rgba($violet-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($violet-400, 0.25),
+      "primary": $violet-550,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-550, 0.5),
+      "primary-hover": $violet-650,
+      "primary-hover-background": $violet-650,
+      "primary-focus": rgba($violet-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "yellow": (
+    "dark": (
+      "text-selection-color": rgba($yellow-350, 0.1875),
+      "primary": $yellow-350,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-350, 0.5),
+      "primary-hover": $yellow-250,
+      "primary-hover-background": mix($yellow-100, $yellow-50),
+      "primary-focus": rgba($yellow-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($yellow-400, 0.25),
+      "primary": $yellow-550,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-550, 0.5),
+      "primary-hover": $yellow-650,
+      "primary-hover-background": $yellow-150,
+      "primary-focus": rgba($yellow-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "zinc": (
+    "dark": (
+      "text-selection-color": rgba($zinc-350, 0.1875),
+      "primary": $zinc-350,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-350, 0.5),
+      "primary-hover": $zinc-250,
+      "primary-hover-background": $zinc-500,
+      "primary-focus": rgba($zinc-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($zinc-400, 0.25),
+      "primary": $zinc-550,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-550, 0.5),
+      "primary-hover": $zinc-650,
+      "primary-hover-background": $zinc-600,
+      "primary-focus": rgba($zinc-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+);
+
+@function get($key, $mode: "light") {
+  @return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
+}
diff --git a/utilities/accessibility.scss b/utilities/accessibility.scss
new file mode 100644
index 0000000..6affc2e
--- /dev/null
+++ b/utilities/accessibility.scss
@@ -0,0 +1,57 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "utilities/accessibility") {
+  /**
+   * Accessibility & User interaction
+   */
+
+  // Based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Accessibility
+
+  // Change the cursor on control elements in all browsers (opinionated)
+  #{$parent-selector} [aria-controls] {
+    cursor: pointer;
+  }
+
+  // Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
+  #{$parent-selector} [aria-disabled="true"],
+  #{$parent-selector} [disabled] {
+    cursor: not-allowed;
+  }
+
+  // Change the display on visually hidden accessible elements in all browsers (opinionated)
+  #{$parent-selector} [aria-hidden="false"][hidden] {
+    display: initial;
+  }
+
+  #{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
+    clip: rect(0, 0, 0, 0);
+    position: absolute;
+  }
+
+  // User interaction
+  // Remove the tapping delay in IE 10
+  #{$parent-selector} a,
+  #{$parent-selector} area,
+  #{$parent-selector} button,
+  #{$parent-selector} input,
+  #{$parent-selector} label,
+  #{$parent-selector} select,
+  #{$parent-selector} summary,
+  #{$parent-selector} textarea,
+  #{$parent-selector} [tabindex] {
+    -ms-touch-action: manipulation;
+  }
+
+  // Styling
+  // ––––––––––––––––––––
+
+  #{$parent-selector} [dir="rtl"] {
+    direction: rtl;
+  }
+}
diff --git a/utilities/reduce-motion.scss b/utilities/reduce-motion.scss
new file mode 100644
index 0000000..89a36a0
--- /dev/null
+++ b/utilities/reduce-motion.scss
@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
+  /**
+   * Reduce Motion Features
+   */
+
+  // Based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove animations when motion is reduced (opinionated)
+  // 2. Remove fixed background attachments when motion is reduced (opinionated)
+  // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
+  // 4. Remove transitions when motion is reduced (opinionated)
+  @media (prefers-reduced-motion: reduce) {
+    #{$parent-selector} *:not([aria-busy="true"]),
+    #{$parent-selector} :not([aria-busy="true"])::before,
+    #{$parent-selector} :not([aria-busy="true"])::after {
+      background-attachment: initial !important; // 2
+      animation-duration: 1ms !important; // 1
+      animation-delay: -1ms !important; // 1
+      animation-iteration-count: 1 !important; // 1
+      scroll-behavior: auto !important; // 3
+      transition-delay: 0s !important; // 4
+      transition-duration: 0s !important; // 4
+    }
+  }
+}