html:root {
  --slate-1: 255 255 255;
  --slate-2: 246 247 249;
  --slate-3: 237 239 242;
  --slate-4: 229 231 235;
  --slate-5: 217 221 227;
  --slate-6: 205 210 218;
  --slate-7: 184 192 204;
  --slate-8: 153 162 177;
  --slate-9: 123 133 149;
  --slate-10: 108 118 134;
  --slate-11: 87 96 112;
  --slate-12: 24 26 31;

  --iris-1: 251 253 255;
  --iris-2: 245 248 254;
  --iris-3: 234 240 252;
  --iris-4: 220 231 250;
  --iris-5: 202 218 246;
  --iris-6: 180 202 240;
  --iris-7: 147 178 232;
  --iris-8: 105 146 215;
  --iris-9: 40 89 175;
  --iris-10: 31 76 155;
  --iris-11: 40 89 175;
  --iris-12: 23 48 91;

  --blue-1: var(--iris-1);
  --blue-2: var(--iris-2);
  --blue-3: var(--iris-3);
  --blue-4: var(--iris-4);
  --blue-5: var(--iris-5);
  --blue-6: var(--iris-6);
  --blue-7: var(--iris-7);
  --blue-8: var(--iris-8);
  --blue-9: var(--iris-9);
  --blue-10: var(--iris-10);
  --blue-11: var(--iris-11);
  --blue-12: var(--iris-12);

  --background-color: 246 247 249;
  --surface-1: 255 255 255;
  --surface-2: 255 255 255;
  --surface-active: 234 240 252;
  --background-input-box: 24, 26, 31, 0.04;
  --text-blue: 40 89 175;
  --text-purple: 81 70 165;
  --text-amber: 139 83 0;
  --border-container: 229, 231, 235, 1;
  --border-strong: 205 210 218;
  --border-weak: 229 231 235;
  --border-blue-strong: 40 89 175;
  --solid-1: 255 255 255;
  --solid-2: 246 247 249;
  --solid-3: 237 239 242;
  --solid-active: 234 240 252;
  --solid-iris: 220 231 250;
  --solid-purple: 237 232 255;
  --card-color: 255 255 255;
  --button-color: 255 255 255;
  --label-background: 237 239 242;
  --border-blue: 40, 89, 175, 0.5;

  --alpha-1: 153, 162, 177, 0.22;
  --alpha-2: 108, 118, 134, 0.12;
  --alpha-3: 255, 255, 255, 0.96;
  --black-alpha-1: 24, 26, 31, 0.12;
  --black-alpha-2: 24, 26, 31, 0.04;
  --white-alpha: 255, 255, 255, 0.8;

  --call-widget: 27, 29, 34, 0.97;
  --call-widget-border: 244, 245, 247, 0.14;
  --call-widget-text: 244, 245, 247, 1;
  --call-widget-sub-text: 176, 183, 195, 1;
}

:is(html, body).dark {
  --slate-1: 21 23 27;
  --slate-2: 27 29 34;
  --slate-3: 34 37 43;
  --slate-4: 42 45 52;
  --slate-5: 48 51 58;
  --slate-6: 60 65 75;
  --slate-7: 77 84 97;
  --slate-8: 104 114 130;
  --slate-9: 129 140 156;
  --slate-10: 146 153 165;
  --slate-11: 176 183 195;
  --slate-12: 244 245 247;

  --iris-1: 21 23 27;
  --iris-2: 26 33 46;
  --iris-3: 33 45 65;
  --iris-4: 38 55 83;
  --iris-5: 43 66 104;
  --iris-6: 48 80 130;
  --iris-7: 56 101 164;
  --iris-8: 68 124 199;
  --iris-9: 40 89 175;
  --iris-10: 53 106 199;
  --iris-11: 156 190 255;
  --iris-12: 222 234 255;

  --blue-1: var(--iris-1);
  --blue-2: var(--iris-2);
  --blue-3: var(--iris-3);
  --blue-4: var(--iris-4);
  --blue-5: var(--iris-5);
  --blue-6: var(--iris-6);
  --blue-7: var(--iris-7);
  --blue-8: var(--iris-8);
  --blue-9: var(--iris-9);
  --blue-10: var(--iris-10);
  --blue-11: var(--iris-11);
  --blue-12: var(--iris-12);

  --background-color: 21 23 27;
  --surface-1: 21 23 27;
  --surface-2: 27 29 34;
  --surface-active: 38 55 83;
  --background-input-box: 244, 245, 247, 0.04;
  --text-blue: 156 190 255;
  --text-purple: 188 177 255;
  --text-amber: 255 208 128;
  --border-container: 48, 51, 58, 1;
  --border-strong: 60 65 75;
  --border-weak: 48 51 58;
  --border-blue-strong: 105 146 215;
  --solid-1: 27 29 34;
  --solid-2: 34 37 43;
  --solid-3: 42 45 52;
  --solid-active: 38 55 83;
  --solid-iris: 38 55 83;
  --solid-purple: 47 41 72;
  --card-color: 27 29 34;
  --button-color: 42 45 52;
  --label-background: 34 37 43;
  --border-blue: 105, 146, 215, 0.5;

  --alpha-1: 42, 45, 52, 0.88;
  --alpha-2: 176, 183, 195, 0.14;
  --alpha-3: 27, 29, 34, 0.96;
  --black-alpha-1: 0, 0, 0, 0.32;
  --black-alpha-2: 0, 0, 0, 0.2;
  --white-alpha: 244, 245, 247, 0.1;

  --call-widget: 27, 29, 34, 1;
  --call-widget-border: 244, 245, 247, 0.1;
  --call-widget-text: 244, 245, 247, 1;
  --call-widget-sub-text: 176, 183, 195, 1;
}

/* Runtime overrides for utilities compiled before the ValueChat palette. */
body .branding--link {
  filter: none !important;
}
.bg-n-brand,
.bg-woot-500 {
  background-color: #2859af !important;
}
.text-n-brand,
.text-woot-500 {
  color: #2859af !important;
}
.border-n-brand,
.border-woot-500 {
  border-color: #2859af !important;
}
.ring-n-brand,
.ring-woot-500 {
  --tw-ring-color: #2859af !important;
}
.outline-n-brand {
  outline-color: #2859af !important;
}
.hover\:bg-n-brand:hover,
.hover\:bg-woot-500:hover {
  background-color: #1f4c9b !important;
}
.focus\:ring-n-brand:focus {
  --tw-ring-color: #2859af !important;
}

:is(html, body).dark .text-n-brand,
:is(html, body).dark .dark\:text-n-brand,
:is(html, body).dark .text-woot-500,
:is(html, body).dark .dark\:text-woot-500 {
  color: #9cbeff !important;
}

/* VALUECHAT AUTH THEME */
/* Auth-only brand layer. Existing Vue forms and authentication stay in place. */
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  ) {
  min-height: 100vh;
  padding: 64px 24px !important;
  background: #f6f7f9 !important;
  color: #181a1f;
}
main:has(input[data-testid='email_input']) {
  justify-content: center;
}
main:has(input[data-testid='email_input']) > section:first-child {
  width: 100%;
  max-width: 440px;
}
main:has(input[data-testid='email_input']) > section:first-child img {
  width: 68px;
  height: 50px;
  object-fit: contain;
}
main:has(input[data-testid='email_input']) > section:first-child h2 {
  color: #181a1f;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
main:has(input[data-testid='email_input']) > section:first-child p {
  color: #576070;
}
main:has(input[data-testid='email_input']) > section:has(form) {
  width: 100%;
  max-width: 440px;
  margin: 28px auto 0 !important;
  padding: 32px !important;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff !important;
  box-shadow: 0 16px 48px #181a1f0a !important;
}
div.bg-cover:has(form input[name='email_address']) > .absolute {
  display: none;
}
div.bg-cover:has(form input[name='email_address']) > .relative:has(form) {
  width: 100%;
  max-width: 480px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff !important;
  outline: 0;
  box-shadow: 0 16px 48px #181a1f0a;
}
div.bg-cover:has(form input[name='email_address']) > .relative:has(form) > div {
  padding: 36px;
}
div.bg-cover:has(form input[name='email_address']) img {
  width: 68px;
  height: 50px;
  object-fit: contain;
}
div.bg-cover:has(form input[name='email_address']) h2 {
  color: #181a1f;
  font-size: 30px;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  :is(label, h2, button) {
  color: #181a1f;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  a {
  color: #2859af !important;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  input {
  min-height: 44px;
  border-radius: 8px;
  background: #fff !important;
  color: #181a1f;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  input:not(.error) {
  outline-color: #cdd2da;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  input:focus {
  outline-color: #2859af;
  box-shadow: 0 0 0 3px #2859af12;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  input::placeholder {
  color: #6c7686;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  button[data-testid='submit_button'] {
  min-height: 44px;
  border-radius: 8px;
  background: #e2f300 !important;
  color: #181a1f !important;
  border: 1px solid #d4e400;
  font-size: 14px;
  font-weight: 550;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  button[data-testid='submit_button']:hover:not(:disabled) {
  background: #d5e600 !important;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  button[data-testid='submit_button']:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:is(
    main:has(input[data-testid='email_input']),
    div.bg-cover:has(form input[name='email_address'])
  )
  button[data-testid='submit_button']:focus-visible {
  outline: 2px solid #2859af;
  outline-offset: 3px;
}
div.bg-cover:has(form input[name='email_address']) p {
  color: #576070;
}
@media (max-width: 540px) {
  :is(
      main:has(input[data-testid='email_input']),
      div.bg-cover:has(form input[name='email_address'])
    ) {
    padding: 32px 16px !important;
  }
  main:has(input[data-testid='email_input']) > section:has(form) {
    padding: 24px !important;
  }
  div.bg-cover:has(form input[name='email_address'])
    > .relative:has(form)
    > div {
    padding: 28px 24px;
  }
}