@websolutespa/bom-llm 0.0.12 → 0.0.13

package/dist/umd/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
 .llm html,
 .llm body,
 .llm p,
@@ -132,30 +134,6 @@
   background-color: transparent;
 }
 
-.llm {
-  --llm-button-size: 60px;
-  --llm-color-ui-1: #003c8c;
-  --llm-color-ui-2: #73c3ff;
-  --llm-color-ui-3: #96dca0;
-  --llm-color-ui-4: #dcdc3c;
-  --llm-color-ui-5: #b41e5f;
-  --llm-color-ui-6: #aa96f0;
-  --llm-color-ui-7: #007378;
-  --llm-color-ui-8: #dcdc3c;
-  --llm-color-ui-9: #cda582;
-  --llm-color-ui-10: #ffe6a0;
-  --llm-color-ui-white: #fff;
-  --llm-color-ui-black: #000;
-  --llm-color-ui-grey-00: #6a6969;
-  --llm-color-ui-grey-01: #999;
-  --llm-color-ui-grey-02: #cdcdcd;
-  --llm-color-ui-grey-03: #e8e8e8;
-  --llm-color-ui-grey-04: #f6f6f6;
-  --llm-color-ui-grey-05: #fbfbfb;
-  --llm-font-primary: "Aeonik";
-  --llm-font-secondary: "Capraia";
-}
-
 @font-face {
   font-family: "Aeonik";
   src: url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff2"), url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff");
@@ -194,6 +172,27 @@
   font-display: swap;
 }
 */
+.llm,
+.llm h1,
+.llm h2,
+.llm h3,
+.llm h4,
+.llm h5,
+.llm h6,
+.llm a,
+.llm b,
+.llm em,
+.llm p,
+.llm strong,
+.llm span,
+.llm ol,
+.llm ul {
+  color: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-family: var(--llm-font-primary);
+}
+
 .llm html,
 .llm body,
 .llm p,
@@ -293,6 +292,7 @@ llm-embed {
   max-height: 100vh;
   background: transparent;
   overflow: clip;
+  border-radius: 10px;
 }
 
 .llm {
@@ -311,7 +311,7 @@ llm-embed {
   z-index: 9999;
 }
 
-.-llm-t-display-1 {
+.llm .-llm-t-display-1 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -320,7 +320,7 @@ llm-embed {
   font-size: clamp(32px, 32px + (100vw - 375px) / 1545 * (40), 72px);
 }
 
-.-llm-t-display-2 {
+.llm .-llm-t-display-2 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -329,7 +329,7 @@ llm-embed {
   font-size: clamp(32px, 32px + (100vw - 375px) / 1545 * (32), 64px);
 }
 
-.-llm-t-display-3 {
+.llm .-llm-t-display-3 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -338,7 +338,7 @@ llm-embed {
   font-size: clamp(24px, 24px + (100vw - 375px) / 1545 * (32), 56px);
 }
 
-.-llm-t-display-4 {
+.llm .-llm-t-display-4 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -347,7 +347,7 @@ llm-embed {
   font-size: clamp(24px, 24px + (100vw - 375px) / 1545 * (24), 48px);
 }
 
-.-llm-t-display-5 {
+.llm .-llm-t-display-5 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -356,7 +356,7 @@ llm-embed {
   font-size: clamp(24px, 24px + (100vw - 375px) / 1545 * (16), 40px);
 }
 
-.-llm-t-display-6 {
+.llm .-llm-t-display-6 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -365,7 +365,7 @@ llm-embed {
   font-size: clamp(16px, 16px + (100vw - 375px) / 1545 * (16), 32px);
 }
 
-.-llm-t-heading-1 {
+.llm .-llm-t-heading-1 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -374,7 +374,7 @@ llm-embed {
   font-size: clamp(18px, 18px + (100vw - 375px) / 1545 * (14), 32px);
 }
 
-.-llm-t-heading-2 {
+.llm .-llm-t-heading-2 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -383,7 +383,7 @@ llm-embed {
   font-size: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
 }
 
-.-llm-t-body-1 {
+.llm .-llm-t-body-1 {
   line-height: 1;
   font-family: var(--llm-font-secondary);
   font-weight: normal;
@@ -391,7 +391,7 @@ llm-embed {
   font-size: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
 }
 
-.-llm-t-body-2 {
+.llm .-llm-t-body-2 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -400,7 +400,7 @@ llm-embed {
   font-size: clamp(16px, 16px + (100vw - 375px) / 1545 * (2), 18px);
 }
 
-.-llm-t-body-3 {
+.llm .-llm-t-body-3 {
   line-height: 1;
   font-family: var(--llm-font-secondary);
   font-weight: normal;
@@ -408,7 +408,7 @@ llm-embed {
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (4), 18px);
 }
 
-.-llm-t-body-4 {
+.llm .-llm-t-body-4 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -416,7 +416,7 @@ llm-embed {
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (2), 16px);
 }
 
-.-llm-t-body-5 {
+.llm .-llm-t-body-5 {
   line-height: 1;
   font-family: var(--llm-font-secondary);
   font-weight: normal;
@@ -424,7 +424,7 @@ llm-embed {
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (2), 16px);
 }
 
-.-llm-t-label-1 {
+.llm .-llm-t-label-1 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -432,7 +432,7 @@ llm-embed {
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (2), 16px);
 }
 
-.-llm-t-cta-1 {
+.llm .-llm-t-cta-1 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -442,7 +442,7 @@ llm-embed {
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (2), 16px);
 }
 
-.-llm-t-cta-2 {
+.llm .-llm-t-cta-2 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 700;
@@ -451,7 +451,7 @@ llm-embed {
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (2), 16px);
 }
 
-.-llm-t-cta-3 {
+.llm .-llm-t-cta-3 {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 500;
@@ -460,7 +460,7 @@ llm-embed {
   font-size: clamp(12px, 12px + (100vw - 375px) / 1545 * (2), 14px);
 }
 
-.-llm-t-cta-4 {
+.llm .-llm-t-cta-4 {
   line-height: 1;
   font-family: var(--llm-font-secondary);
   font-weight: 300;
@@ -976,19 +976,20 @@ llm-embed {
   pointer-events: auto;
   margin: 24px;
   border-radius: 50%;
-  background: var(--llm-trigger-background);
   cursor: pointer;
   position: relative;
 }
 .llm .llm__trigger-btn {
-  overflow: hidden;
-  border-radius: 50%;
-  width: var(--llm-button-size);
-  height: var(--llm-button-size);
-  background: var(--llm-color-ui-2);
   position: relative;
+  width: var(--llm-trigger-size);
+  height: var(--llm-trigger-size);
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--llm-trigger-background);
+  color: var(--llm-trigger-foreground);
   will-change: transform;
   transition: 0.4s;
+  box-shadow: var(--llm-trigger-box-shadow);
   cursor: pointer;
 }
 .llm .llm__trigger-btn > span {
@@ -1016,20 +1017,23 @@ llm-embed {
   }
 }
 .llm .llm__trigger-welcome > div {
-  position: relative;
-  border-radius: 12px;
+  position: absolute;
   padding: clamp(8px, 8px + (100vw - 375px) / 1545 * (8), 16px) clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
   min-width: 200px;
-  text-align: center;
-  color: white;
-  position: absolute;
-  bottom: calc(100% + clamp(8px, 8px + (100vw - 375px) / 1545 * (0), 8px));
   left: 50%;
+  bottom: calc(100% + clamp(8px, 8px + (100vw - 375px) / 1545 * (0), 8px));
   translate: -50% 0%;
-  pointer-events: none;
+  border-radius: 12px;
+  text-align: center;
+  background: var(--llm-color-background);
+  color: var(--llm-color-foreground);
   transition: 0.4s;
+  pointer-events: none;
   overflow: hidden;
 }
+.llm .llm__trigger-welcome > div > span {
+  position: relative;
+}
 .llm .llm__trigger-welcome > div + div {
   min-width: 250px;
   translate: -50% 10%;
@@ -1064,7 +1068,7 @@ llm-embed {
 .llm .llm__background {
   pointer-events: none;
   position: absolute;
-  background: var(--llm-color-ui-1);
+  background: var(--llm-color-background);
   inset: 0;
   z-index: -1;
 }
@@ -1087,14 +1091,14 @@ llm-embed {
   position: relative;
   pointer-events: auto;
   inset: 0;
-  background: var(--llm-color-ui-1);
+  background: var(--llm-color-background);
+  color: var(--llm-color-foreground);
 }
 .llm .llm__scroller {
   position: absolute;
   inset: 0;
   overflow-x: hidden;
   overflow-y: auto;
-  color: var(--llm-color-ui-white);
 }
 .llm .llm__scroller::-webkit-scrollbar {
   width: 6px;
@@ -1181,10 +1185,10 @@ llm-embed {
   top: 110px;
   right: clamp(24px, 24px + (100vw - 375px) / 1545 * (16), 40px);
   z-index: 9;
-  cursor: pointer;
   border-radius: 50%;
-  background: var(--llm-color-ui-white);
-  color: var(--llm-color-ui-1);
+  background: var(--llm-input-background);
+  color: var(--llm-input-accent);
+  cursor: pointer;
 }
 .llm .llm__toggle-speak svg {
   display: block;
@@ -1286,13 +1290,13 @@ llm-embed {
   object-fit: contain;
 }
 .llm .llm__header-back {
-  color: white;
-  text-transform: uppercase;
-  cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * (0), 8px);
+  text-transform: uppercase;
   user-select: none;
+  color: var(--llm-color-foreground);
+  cursor: pointer;
 }
 
 .llm .llm__intro-blob {
@@ -1319,64 +1323,75 @@ llm-embed {
   flex-direction: column;
   gap: clamp(24px, 24px + (100vw - 375px) / 1545 * (16), 40px);
 }
-.llm .llm__intro-links {
+.llm .llm__intro-hints {
   margin-top: clamp(24px, 24px + (100vw - 375px) / 1545 * (16), 40px);
 }
 @media (min-width: 1024px) {
-  .llm .llm__intro-links {
+  .llm .llm__intro-hints {
     margin-top: 0;
   }
 }
+.llm .llm__customIntro {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  border: 0;
+  background: transparent;
+}
 
-.llm .llm__links {
+.llm .llm__hints {
   margin: 0 calc(clamp(20px, 20px + (100vw - 375px) / 1545 * (90), 110px) * -1);
 }
 @media (min-width: 768px) {
-  .llm .llm__links {
+  .llm .llm__hints {
     margin: 0;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: clamp(8px, 8px + (100vw - 375px) / 1545 * (8), 16px);
   }
 }
-.llm .llm__links .swiper-wrapper {
+.llm .llm__hints .swiper-wrapper {
   padding: 1px 0;
 }
-.llm .llm__links .swiper-slide {
+.llm .llm__hints .swiper-slide {
   height: auto;
 }
-.llm .llm__links-card {
-  height: 100%;
-  background: linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%);
-  border: 1px solid rgba(237, 237, 237, 0.3);
-  backdrop-filter: blur(20px);
-  border-radius: 12px;
-  padding: clamp(24px, 24px + (100vw - 375px) / 1545 * (8), 32px);
+.llm .llm__hint {
   display: flex;
   flex-direction: column;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * (8), 16px);
+  padding: clamp(24px, 24px + (100vw - 375px) / 1545 * (8), 32px);
+  height: 100%;
+  border-radius: var(--llm-hint-border-radius);
+  background: var(--llm-hint-background);
+  color: var(--llm-hint-foreground);
+  border: var(--llm-hint-border);
+  font-family: var(--llm-hint-font-family);
+  backdrop-filter: blur(20px);
   cursor: pointer;
 }
 @media (min-width: 768px) {
-  .llm .llm__links-card:first-child {
+  .llm .llm__hint:first-child {
     grid-column: span 2;
   }
 }
-.llm .llm__links-title {
+.llm .llm__hint-title {
   display: flex;
   align-items: center;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * (8), 16px);
   text-transform: uppercase;
 }
-.llm .llm__links-title i {
+.llm .llm__hint-title i {
   display: block;
   width: 18px;
   height: 18px;
 }
-.llm .llm__links-title i svg {
+.llm .llm__hint-title i svg {
   fill: currentColor;
 }
-.llm .llm__links-body {
+.llm .llm__hint-body {
   line-height: 140%;
 }
 
@@ -1391,31 +1406,31 @@ llm-embed {
   box-shadow: -4px 4px 50px 0px rgba(8, 20, 62, 0.08);
   border-radius: 8px;
   overflow: hidden;
-  background: white;
+  background: var(--llm-input-background);
   width: 100%;
 }
 .llm .llm__prompt-textarea {
+  appearance: none;
+  display: block;
+  margin: 0;
+  padding: 10px 40px;
+  width: 100%;
+  max-height: 120px;
+  min-height: 45px;
+  outline: none;
+  border: none;
+  resize: none;
+  border-radius: 0;
   line-height: 1;
   font-family: var(--llm-font-secondary);
   font-weight: normal;
   line-height: 1.4;
   font-size: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
+  font-family: var(--llm-input-font-family);
   font-size: 16px;
-  width: 100%;
   line-height: 1.3;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: none;
-  border: none;
-  margin: 0;
-  padding: 10px 40px;
-  resize: none;
-  max-height: 120px;
-  min-height: 45px;
-  border-radius: 0;
   background: transparent;
-  display: block;
-  color: black;
+  color: var(--llm-input-foreground);
 }
 @media (min-width: 1024px) {
   .llm .llm__prompt-textarea {
@@ -1426,16 +1441,16 @@ llm-embed {
 }
 .llm .llm__prompt-speak, .llm .llm__prompt-microphone {
   position: absolute;
-  color: var(--llm-color-ui-1);
-  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   top: 50%;
   transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   border-radius: 50%;
+  font-size: 16px;
+  color: var(--llm-input-accent);
   cursor: pointer;
 }
 .llm .llm__prompt-speak svg, .llm .llm__prompt-microphone svg {
@@ -1450,18 +1465,18 @@ llm-embed {
   outline: 2px solid transparent;
 }
 .llm .llm__prompt-microphone:active {
-  outline: 2px solid var(--llm-color-ui-1);
+  outline: 2px solid var(--llm-color-base-100);
 }
 .llm .llm__prompt-submit, .llm .llm__prompt-stop {
   flex-shrink: 0;
   width: 45px;
   height: 45px;
-  color: var(--llm-color-ui-1);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--llm-color-ui-2);
+  background: var(--llm-trigger-background);
+  color: var(--llm-trigger-foreground);
   border-radius: 50%;
   cursor: pointer;
 }
@@ -1510,7 +1525,7 @@ llm-embed {
 .llm .llm__prompt-suggestions .swiper-slide {
   width: auto;
 }
-.llm .llm__prompt-suggestions .swiper-slide > div {
+.llm .llm__pill {
   line-height: 1;
   font-family: var(--llm-font-primary);
   font-weight: 700;
@@ -1518,11 +1533,12 @@ llm-embed {
   letter-spacing: 0.02em;
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (2), 16px);
   padding: clamp(8px, 8px + (100vw - 375px) / 1545 * (0), 8px);
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(237, 237, 237, 0.3);
-  border-radius: 5px;
+  border-radius: var(--llm-pill-border-radius);
+  border: var(--llm-pill-border);
+  background: var(--llm-pill-background);
+  color: var(--llm-pill-foreground);
+  font-family: var(--llm-pill-font-family);
   backdrop-filter: blur(20px);
-  color: white;
   cursor: pointer;
 }
 .llm .llm__prompt-powered-by {
@@ -1531,11 +1547,11 @@ llm-embed {
   justify-content: center;
   align-items: center;
   column-gap: 4px;
+  padding: 6px 0;
   right: 0;
   left: 0;
   font-size: 12px;
-  color: white;
-  padding: 6px 0;
+  color: var(--llm-color-foreground);
   opacity: 0.4;
   transition: opacity ease-in-out 250ms;
   cursor: pointer;
@@ -1572,6 +1588,9 @@ llm-embed {
   letter-spacing: 0.02em;
   font-size: clamp(16px, 16px + (100vw - 375px) / 1545 * (16), 32px);
 }
+.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body {
+  font-family: var(--llm-font-primary);
+}
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body h1 {
   line-height: 1;
   font-family: var(--llm-font-primary);
@@ -1617,11 +1636,14 @@ llm-embed {
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a {
   text-decoration: underline;
 }
+.llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:link, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:active, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:visited, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:hover {
+  color: var(--llm-color-neutral-100);
+}
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body img {
   max-width: 320px;
   padding: 8px;
   border-radius: 8px;
-  border: 2px solid rgba(255, 255, 255, 0.4);
+  border: var(--llm-pill-border);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img {
   display: block;
@@ -1747,7 +1769,7 @@ llm-embed {
   padding-top: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
 }
 .llm .llm__event-location svg {
-  color: var(--llm-color-ui-4);
+  color: var(--llm-color-accent-foreground);
   width: 20px;
   height: 20px;
 }
@@ -1780,10 +1802,11 @@ llm-embed {
   font-size: clamp(14px, 14px + (100vw - 375px) / 1545 * (2), 16px);
 }
 .llm .llm__event-time {
-  background: var(--llm-color-ui-7);
+  background: var(--llm-color-secondary-background);
+  color: var(--llm-color-secondary-foreground);
 }
 .llm .llm__event-date {
-  background: var(--llm-color-ui-1);
+  background: var(--llm-color-base-100);
 }
 .llm .llm__event--event {
   margin-top: clamp(32px, 32px + (100vw - 375px) / 1545 * (48), 80px);
@@ -1866,7 +1889,7 @@ llm-embed {
   position: absolute;
   top: 0;
   left: 0;
-  color: var(--llm-color-ui-white);
+  color: var(--llm-color-foreground);
   display: flex;
   gap: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
 }
@@ -1903,7 +1926,7 @@ llm-embed {
   display: inline-flex;
   align-items: center;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * (0), 8px);
-  color: var(--llm-color-ui-white);
+  color: var(--llm-color-foreground);
   overflow: hidden;
   white-space: nowrap;
   transition: opacity 0.3s;
@@ -1921,8 +1944,8 @@ llm-embed {
   line-height: 1;
   letter-spacing: 0.06em;
   font-size: clamp(12px, 12px + (100vw - 375px) / 1545 * (2), 14px);
-  background: var(--llm-color-ui-2);
-  color: var(--llm-color-ui-1);
+  background: var(--llm-color-primary-background);
+  color: var(--llm-color-primary-foreground);
   height: 42px;
   font-style: normal;
   margin: 0;
@@ -1946,6 +1969,9 @@ llm-embed {
   z-index: 2;
   position: relative;
 }
+.llm .llm__cta--submit {
+  background: var(--llm-color-background);
+}
 .llm .llm__cta--simple {
   line-height: 1;
   font-family: var(--llm-font-primary);
@@ -1958,7 +1984,7 @@ llm-embed {
   background: linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%);
   border: 1px solid rgba(237, 237, 237, 0.3);
   backdrop-filter: blur(20px);
-  color: var(--llm-color-ui-white);
+  color: var(--llm-color-foreground);
   font-style: normal;
   border-radius: 12px;
   overflow: hidden;
@@ -2158,20 +2184,20 @@ llm-embed {
   width: 100%;
 }
 .llm .llm__tripadv-inner {
-  width: 100%;
+  position: relative;
   display: flex;
   flex-direction: row;
   gap: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
+  width: 100%;
   padding: clamp(24px, 24px + (100vw - 375px) / 1545 * (8), 32px) 0;
-  border-top: 1px solid var(--llm-color-ui-grey-03);
-  position: relative;
+  border-top: var(--llm-border);
 }
 .llm .llm__tripadv-media {
+  flex-shrink: 0;
+  position: relative;
   width: clamp(60px, 60px + (100vw - 375px) / 1545 * (140), 200px);
   height: clamp(60px, 60px + (100vw - 375px) / 1545 * (140), 200px);
-  position: relative;
   overflow: hidden;
-  flex-shrink: 0;
 }
 .llm .llm__tripadv-media img {
   display: block;
@@ -2252,7 +2278,7 @@ llm-embed {
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * (0), 8px);
 }
 .llm .llm__tripadv-location svg {
-  color: var(--llm-color-ui-4);
+  color: var(--llm-color-accent-foreground);
   width: 20px;
   height: 20px;
 }
@@ -2281,7 +2307,7 @@ llm-embed {
   left: 0;
   width: 100%;
   height: 100%;
-  opacity: 0.6;
+  opacity: var(--llm-canvas-opacity);
 }
 
 .llm .llm__inner--formRequest:not(:first-child) .llm__text-body {
@@ -2345,14 +2371,15 @@ llm-embed {
 .llm .llm__subscribe-field input[type=email] {
   line-height: 1;
   appearance: none;
-  border-radius: 5px;
-  background: var(--llm-color-ui-white);
   display: block;
+  width: 100%;
   height: 56px;
   padding: 0 clamp(24px, 24px + (100vw - 375px) / 1545 * (8), 32px);
-  border: 1px solid var(--llm-color-ui-grey-03);
-  color: var(--llm-color-ui-black);
-  width: 100%;
+  border-radius: 5px;
+  border: var(--llm-border);
+  font-family: var(--llm-input-font-family);
+  background: var(--llm-input-background);
+  color: var(--llm-input-foreground);
 }
 .llm .llm__subscribe-field.-privacy {
   width: 100%;
@@ -2380,13 +2407,13 @@ llm-embed {
 .llm .llm__subscribe-field.-privacy label:before, .llm .llm__subscribe-field.-privacy label:after {
   content: "";
   display: block;
-  border-radius: 2px;
-  border: 2px solid var(--llm-color-ui-white);
+  position: absolute;
   width: 16px;
   height: 16px;
-  position: absolute;
-  left: 0;
   top: 2px;
+  left: 0;
+  border-radius: 2px;
+  border: var(--llm-checkbox-border);
 }
 .llm .llm__subscribe-field.-privacy label:after {
   display: none;
@@ -2446,7 +2473,7 @@ llm-embed {
   left: 50%;
   display: block;
   border-radius: 50%;
-  background: var(--llm-color-ui-white);
+  background: var(--llm-color-foreground);
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 5px;
@@ -2463,7 +2490,7 @@ llm-embed {
   left: 50%;
   display: block;
   border-radius: 50%;
-  background: var(--llm-color-ui-white);
+  background: var(--llm-color-foreground);
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 5px;