:root {
  /* Shared component semantics. Keep these values synchronized with the UI contract. */
  --ui-brand: #72c02c;
  --ui-brand-hover: #64ad26;
  --ui-brand-active: #579720;
  --ui-neutral: #475569;
  --ui-neutral-hover: #3d4a5c;
  --ui-neutral-active: #334155;
  --ui-subtle: #6b7280;
  --ui-subtle-hover: #5b6470;
  --ui-subtle-active: #4b5563;
  --ui-taupe: #d0c4be;
  --ui-taupe-hover: #bfb1aa;
  --ui-taupe-active: #ad9e97;
  --ui-info: #5b5bd6;
  --ui-info-hover: #4f4fc5;
  --ui-info-active: #4545b5;
  --ui-fresh: #0f766e;
  --ui-fresh-hover: #0d675f;
  --ui-fresh-active: #0b574f;
  --ui-attention: #f6c453;
  --ui-attention-hover: #e6b542;
  --ui-attention-active: #d5a534;
  --ui-orange: #f97316;
  --ui-orange-hover: #ea580c;
  --ui-orange-active: #c2410c;
  --ui-warning: #c2410c;
  --ui-warning-hover: #a93709;
  --ui-warning-active: #8f2f07;
  --ui-danger: #dc2626;
  --ui-danger-hover: #c51f1f;
  --ui-danger-active: #ab1919;
}

/* Shared buttons, circle buttons, and badges. Page selectors may position these components but must not restyle them. */
.button,
.badge {
  --component-color: var(--ui-brand);
  --component-hover: var(--ui-brand-hover);
  --component-active: var(--ui-brand-active);
}

.button[data-color="brand"],
.badge[data-color="brand"] {
  --component-color: var(--ui-brand);
  --component-hover: var(--ui-brand-hover);
  --component-active: var(--ui-brand-active);
}

.button[data-color="neutral"],
.badge[data-color="neutral"] {
  --component-color: var(--ui-neutral);
  --component-hover: var(--ui-neutral-hover);
  --component-active: var(--ui-neutral-active);
}

.button[data-color="subtle"],
.badge:not([data-color]),
.badge[data-color="subtle"] {
  --component-color: var(--ui-subtle);
  --component-hover: var(--ui-subtle-hover);
  --component-active: var(--ui-subtle-active);
}

.button[data-color="taupe"],
.badge[data-color="taupe"] {
  --component-color: var(--ui-taupe);
  --component-hover: var(--ui-taupe-hover);
  --component-active: var(--ui-taupe-active);
}

.button[data-color="info"],
.badge[data-color="info"] {
  --component-color: var(--ui-info);
  --component-hover: var(--ui-info-hover);
  --component-active: var(--ui-info-active);
}

.button[data-color="fresh"],
.badge[data-color="fresh"] {
  --component-color: var(--ui-fresh);
  --component-hover: var(--ui-fresh-hover);
  --component-active: var(--ui-fresh-active);
}

.button[data-color="attention"],
.badge[data-color="attention"] {
  --component-color: var(--ui-attention);
  --component-hover: var(--ui-attention-hover);
  --component-active: var(--ui-attention-active);
}

.button[data-color="orange"],
.badge[data-color="orange"] {
  --component-color: var(--ui-orange);
  --component-hover: var(--ui-orange-hover);
  --component-active: var(--ui-orange-active);
}

.button[data-color="warning"],
.badge[data-color="warning"] {
  --component-color: var(--ui-warning);
  --component-hover: var(--ui-warning-hover);
  --component-active: var(--ui-warning-active);
}

.button[data-color="danger"],
.badge[data-color="danger"] {
  --component-color: var(--ui-danger);
  --component-hover: var(--ui-danger-hover);
  --component-active: var(--ui-danger-active);
}

.button:not([data-emphasis="gradient"])[data-label-weight="regular"],
.badge[data-label-weight="regular"] {
  --component-label-weight: 400;
}

.button:not([data-emphasis="gradient"])[data-label-weight="bold"],
.badge[data-label-weight="bold"] {
  --component-label-weight: 700;
}

.button:not([data-emphasis="gradient"])[data-label-color="black"],
.badge[data-label-color="black"] {
  --component-label-color: #111111;
  --component-label-hover: #111111;
  --component-label-active: #111111;
}

.button:not([data-emphasis="gradient"])[data-label-color="white"],
.badge[data-label-color="white"] {
  --component-label-color: #ffffff;
  --component-label-hover: #ffffff;
  --component-label-active: #ffffff;
}

.button:not([data-emphasis="gradient"])[data-label-color="native"],
.badge[data-label-color="native"] {
  --component-label-color: var(--component-color);
  --component-label-hover: var(--component-hover);
  --component-label-active: var(--component-active);
}

.button {
  --button-height: 44px;
  --button-padding-x: 18px;
  --button-font-size: 15px;
  --button-gap: 8px;
  --button-radius: 10px;
  --button-icon-size: 18px;
  --button-spinner-color: var(--component-label-color, #ffffff);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  height: var(--button-height);
  min-height: 0;
  padding: 0 var(--button-padding-x);
  border-radius: var(--button-radius);
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: var(--component-label-weight, 700);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease,
    opacity 150ms ease;
}

.button[hidden] {
  display: none;
}

.button[data-size="big"] {
  --button-height: 52px;
  --button-padding-x: 24px;
  --button-font-size: 18px;
  --button-gap: 10px;
  --button-radius: 12px;
  --button-icon-size: 22px;
}

.button:not([data-size]),
.button[data-size="normal"] {
  --button-height: 44px;
  --button-padding-x: 18px;
  --button-font-size: 15px;
  --button-gap: 8px;
  --button-radius: 10px;
  --button-icon-size: 18px;
}

.button[data-size="small"] {
  --button-height: 34px;
  --button-padding-x: 12px;
  --button-font-size: 13px;
  --button-gap: 6px;
  --button-radius: 8px;
  --button-icon-size: 16px;
}

.button[data-size="tiny"] {
  --button-height: 28px;
  --button-padding-x: 9px;
  --button-font-size: 12px;
  --button-gap: 5px;
  --button-radius: 7px;
  --button-icon-size: 14px;
}

.button[data-size="micro"] {
  --button-height: 24px;
  --button-padding-x: 7px;
  --button-font-size: 11px;
  --button-gap: 4px;
  --button-radius: 6px;
  --button-icon-size: 12px;
}

.button[data-icon-only="true"] {
  width: var(--button-height);
  min-width: var(--button-height);
  padding: 0;
}

.button[data-full-width="true"] {
  width: 100%;
}

.button[data-wrap="true"] {
  height: auto;
  min-height: var(--button-height);
  white-space: normal;
}

.button[data-wrap="true"] .button-label {
  overflow-wrap: anywhere;
}

.circle-button {
  width: var(--button-height);
  min-width: var(--button-height);
  height: var(--button-height);
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
}

.button .ui-icon,
.ui-icon {
  display: block;
  width: var(--button-icon-size, 18px);
  height: var(--button-icon-size, 18px);
  max-width: none;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button:not([data-variant]),
.button[data-variant="filled"],
.badge[data-variant="filled"] {
  color: var(--component-label-color, #ffffff);
  background: var(--component-color);
  border: 1px solid var(--component-color);
}

.button:not([data-variant]),
.button[data-variant="filled"] {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--component-color) 17%, transparent);
}

.button[data-color="attention"]:not([data-variant]),
.button[data-color="attention"][data-variant="filled"] {
  color: var(--component-label-color, #111111);
  --button-spinner-color: var(--component-label-color, #111111);
}

.button:not([data-variant]):hover:not(:disabled):not([aria-disabled="true"]),
.button[data-variant="filled"]:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--component-label-hover, #ffffff);
  background: var(--component-hover);
  border-color: var(--component-hover);
}

.button[data-color="attention"]:not([data-variant]):hover:not(:disabled):not([aria-disabled="true"]),
.button[data-color="attention"][data-variant="filled"]:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--component-label-hover, #111111);
}

.button:not([data-variant]):active:not(:disabled):not([aria-disabled="true"]),
.button[data-variant="filled"]:active:not(:disabled):not([aria-disabled="true"]) {
  color: var(--component-label-active, #ffffff);
  background: var(--component-active);
  border-color: var(--component-active);
}

.button[data-color="attention"]:not([data-variant]):active:not(:disabled):not([aria-disabled="true"]),
.button[data-color="attention"][data-variant="filled"]:active:not(:disabled):not([aria-disabled="true"]) {
  color: var(--component-label-active, #111111);
}

.button[data-variant="border"],
.badge:not([data-variant]),
.badge[data-variant="border"] {
  --button-spinner-color: var(--component-label-color, var(--component-color));
  color: var(--component-label-color, #111111);
  background: #ffffff;
  border: 1px solid var(--component-color);
}

.button[data-variant="border"]:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--component-label-hover, #111111);
  background: #f8faf8;
  border-color: var(--component-hover);
}

.button[data-variant="border"]:active:not(:disabled):not([aria-disabled="true"]) {
  color: var(--component-label-active, #111111);
  background: #f1f4f1;
  border-color: var(--component-active);
}

.button[data-variant="ghost"] {
  --button-spinner-color: var(--component-label-color, var(--component-color));
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--component-label-color, var(--component-color));
}

.button[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent;
  background: color-mix(in srgb, var(--component-color) 9%, transparent);
  color: var(--component-label-hover, var(--component-hover));
}

.button[data-variant="ghost"]:active:not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent;
  background: color-mix(in srgb, var(--component-color) 15%, transparent);
  color: var(--component-label-active, var(--component-active));
}

.button[aria-pressed="true"]:not([data-variant="ghost"]) {
  color: var(--component-label-color, #ffffff);
  background: var(--component-color);
  border-color: var(--component-color);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--component-color) 17%, transparent);
}

.button[aria-pressed="true"]:not([data-variant="ghost"]):hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--component-label-hover, #ffffff);
  background: var(--component-hover);
  border-color: var(--component-hover);
}

.button[data-variant="ghost"][aria-pressed="true"],
.button[data-variant="ghost"][aria-expanded="true"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--component-color) 13%, transparent);
  color: var(--component-label-color, var(--component-color));
  box-shadow: none;
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="brand"]:not([data-color]):not([data-label-color]) {
  --gradient-shadow: #0f766e;

  background: linear-gradient(135deg, #3f861a 0%, #0f766e 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="brand"]:not([data-color]):not([data-label-color]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #347315 0%, #0d675f 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="brand"]:not([data-color]):not([data-label-color]):active:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #2b6112 0%, #0b574f 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="ai"]:not([data-color]):not([data-label-color]) {
  --gradient-shadow: #6366f1;

  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="ai"]:not([data-color]):not([data-label-color]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="ai"]:not([data-color]):not([data-label-color]):active:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #3730a3 0%, #5b21b6 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="fresh"]:not([data-color]):not([data-label-color]) {
  --gradient-shadow: #0e7490;

  background: linear-gradient(135deg, #0f766e 0%, #0e7490 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="fresh"]:not([data-color]):not([data-label-color]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #0d675f 0%, #0c647a 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="fresh"]:not([data-color]):not([data-label-color]):active:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #0b574f 0%, #0a5366 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="premium"]:not([data-color]):not([data-label-color]) {
  --gradient-shadow: #be185d;

  background: linear-gradient(135deg, #7e22ce 0%, #be185d 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="premium"]:not([data-color]):not([data-label-color]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #6b21a8 0%, #9d174d 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="premium"]:not([data-color]):not([data-label-color]):active:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #581c87 0%, #831843 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="bigorange"]:not([data-color]):not([data-label-color]) {
  --gradient-shadow: #f4511e;

  background: linear-gradient(135deg, #ff9a2f 0%, #f4511e 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="bigorange"]:not([data-color]):not([data-label-color]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #f58b20 0%, #dc4317 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"][data-gradient="bigorange"]:not([data-color]):not([data-label-color]):active:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, #e87d17 0%, #c83a13 100%);
}

.button[data-emphasis="gradient"][data-variant="filled"]:not([data-color]):not([data-label-color]):is(
  [data-gradient="brand"],
  [data-gradient="ai"],
  [data-gradient="fresh"],
  [data-gradient="premium"],
  [data-gradient="bigorange"]
) {
  --button-focus-color: var(--gradient-shadow);

  color: #ffffff;
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--gradient-shadow) 24%, transparent);
}

.button[data-emphasis="gradient"][data-variant="filled"]:not([data-color]):not([data-label-color]):is(
  [data-gradient="brand"],
  [data-gradient="ai"],
  [data-gradient="fresh"],
  [data-gradient="premium"],
  [data-gradient="bigorange"]
):hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--gradient-shadow) 30%, transparent);
}

.button[data-emphasis="gradient"][data-variant="filled"]:not([data-color]):not([data-label-color]):is(
  [data-gradient="brand"],
  [data-gradient="ai"],
  [data-gradient="fresh"],
  [data-gradient="premium"],
  [data-gradient="bigorange"]
):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--gradient-shadow) 24%, transparent);
}

.button:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
}

.button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
}

.button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--button-focus-color, var(--component-color)) 30%, transparent);
  outline-offset: 2px;
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
  pointer-events: none;
}

.button[aria-busy="true"] {
  color: transparent;
  cursor: wait;
  pointer-events: none;
  transform: none;
}

.button[aria-busy="true"] > * {
  opacity: 0;
}

.button[aria-busy="true"]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(18px, calc(var(--button-height) - 8px));
  height: min(18px, calc(var(--button-height) - 8px));
  border: 2px solid color-mix(in srgb, var(--button-spinner-color) 32%, transparent);
  border-top-color: var(--button-spinner-color);
  border-radius: 999px;
  content: "";
  transform: translate(-50%, -50%);
  animation: ui-button-spin 700ms linear infinite;
}

@keyframes ui-button-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--component-label-weight, 400);
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.badge[data-size="small"] {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 12px;
}

.badge[data-size="tiny"] {
  min-height: 20px;
  padding: 3px 7px;
  font-size: 11px;
}

.badge[data-size="micro"] {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 10px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--component-color);
}

.ui-structural-control:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-neutral) 30%, transparent);
  outline-offset: 2px;
}

.ui-structural-control:disabled,
.ui-structural-control[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.46;
  pointer-events: none;
}

@media (pointer: coarse) {
  .button[data-size="small"]::before,
  .button[data-size="tiny"]::before,
  .button[data-size="micro"]::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 40px);
    height: max(100%, 40px);
    content: "";
    transform: translate(-50%, -50%);
  }

  .ui-structural-control[data-compact-control="true"] {
    position: relative;
  }

  .ui-structural-control[data-compact-control="true"]::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 40px);
    height: max(100%, 40px);
    content: "";
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:hover:not(:disabled):not([aria-disabled="true"]),
  .button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }

  .button[aria-busy="true"]::after {
    animation-duration: 1.4s;
  }
}

@media (forced-colors: active) {
  .button,
  .badge,
  .ui-structural-control {
    border-color: ButtonText;
    forced-color-adjust: auto;
  }

  .button:focus-visible,
  .ui-structural-control:focus-visible {
    outline-color: Highlight;
  }

  .badge-dot {
    background: CanvasText;
  }
}