/* Yupnet · Chatwoot Community 4.19.1. Upstream geometry and semantic states stay intact. */
:root {
  color-scheme: light;
  --yupnet-purple: #43235d;
  --yupnet-lime: #accf43;
  --blue-1: 253 251 255;
  --blue-2: 249 245 253;
  --blue-3: 242 233 249;
  --blue-4: 232 218 244;
  --blue-5: 222 202 237;
  --blue-6: 207 181 227;
  --blue-7: 185 153 211;
  --blue-8: 156 117 189;
  --blue-9: 98 50 138;
  --blue-10: 77 34 111;
  --blue-11: 98 50 138;
  --blue-12: 53 33 68;
  --slate-1: 252 251 253;
  --slate-2: 248 247 250;
  --slate-3: 241 238 245;
  --slate-4: 233 228 239;
  --slate-5: 225 219 233;
  --slate-6: 217 209 227;
  --slate-7: 205 195 217;
  --slate-8: 184 173 198;
  --slate-9: 142 130 155;
  --slate-10: 128 116 141;
  --slate-11: 109 99 118;
  --slate-12: 48 41 59;
  --background-color: 245 244 247;
  --surface-1: 254 253 255;
  --surface-2: 255 255 255;
  --surface-active: 246 240 250;
  --text-blue: 53 33 68;
  --border-blue-strong: 98 50 138;
  --border-blue: 98, 50, 138, 0.5;
  --solid-blue: 238 225 246;
  --solid-blue-2: 252 248 255;
  --solid-active: 246 240 250;
  --border-container: 234 229 239;
  --border-strong: 222 214 230;
  --border-weak: 238 233 243;
  --label-background: 245 242 248;
}

.dark {
  color-scheme: dark;
  --blue-1: 22 17 29;
  --blue-2: 29 22 38;
  --blue-3: 45 29 61;
  --blue-4: 58 35 78;
  --blue-5: 70 42 94;
  --blue-6: 84 52 112;
  --blue-7: 104 67 135;
  --blue-8: 129 85 162;
  --blue-9: 128 77 168;
  --blue-10: 141 88 181;
  --blue-11: 202 170 228;
  --blue-12: 239 222 252;
  --slate-1: 21 18 26;
  --slate-2: 27 23 33;
  --slate-3: 36 30 44;
  --slate-4: 44 37 52;
  --slate-5: 53 45 62;
  --slate-6: 65 55 75;
  --slate-7: 79 68 90;
  --slate-8: 103 90 115;
  --slate-9: 122 108 134;
  --slate-10: 140 126 151;
  --slate-11: 187 176 197;
  --slate-12: 244 239 248;
  --background-color: 29 25 35;
  --surface-1: 24 20 30;
  --surface-2: 27 23 33;
  --surface-active: 61 45 74;
  --text-blue: 239 222 252;
  --border-blue-strong: 202 170 228;
  --border-blue: 166, 119, 202, 0.5;
  --solid-1: 26 22 32;
  --solid-2: 32 27 39;
  --solid-3: 44 36 53;
  --solid-active: 61 45 74;
  --solid-blue: 58 35 78;
  --solid-blue-2: 32 25 40;
  --card-color: 30 25 37;
  --border-strong: 56 47 66;
  --border-weak: 38 31 46;
  --button-color: 48 39 57;
  --label-background: 41 34 50;
}

/* The official white-and-lime logo needs a purple field in both themes. */
img[src="/yupnet/20261104-1/logo.png"] {
  box-sizing: content-box;
  height: 64px;
  width: auto;
  background: var(--yupnet-purple);
  padding: 12px 22px;
  border-radius: 12px;
  object-fit: contain;
  max-width: calc(100% - 44px);
}

img[src="/yupnet/20261104-1/icon.png"] {
  object-fit: contain;
  flex-shrink: 0;
}

/* Upstream n-brand is a fixed hex color, separate from the blue token scale. */
.text-link,
.text-link:hover,
.text-n-brand,
.hover\:text-n-brand:hover {
  color: rgb(var(--blue-11) / var(--tw-text-opacity, 1));
}

.bg-n-brand,
.hover\:bg-n-brand:hover {
  background-color: rgb(var(--blue-9) / var(--tw-bg-opacity, 1));
}

.border-n-brand,
.border-b-n-brand,
.hover\:border-n-brand:hover {
  border-color: rgb(var(--blue-9) / var(--tw-border-opacity, 1));
}

.ring-n-brand,
.focus\:ring-n-brand:focus {
  --tw-ring-color: rgb(var(--blue-11) / var(--tw-ring-opacity, 1));
}

/* Also cover keyboard navigation on controls that have no upstream focus ring. */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgb(var(--blue-11));
  outline-offset: 3px;
}