/* INTERACTIVE SURFACES */
:root {
  --interactive-color: #c2b389;
  --default: 0%;
  --hover: 30%;
  --active: 60%;
  --interactive-state: var(--default);
}

html,
body {
  font-variant-numeric: lining-nums proportional-nums;
}

body {
  /* background: var(--background-default); */
  color: var(--foreground-default);
  /*   margin: var(--layout-grid-margin); */
}

a,
button {
  cursor: pointer;
  border: none;
  --foreground-color: var(--foreground-default);
}

.interactive-background,
button,
select,
.select-dropdown {
  transition: background 100ms linear;
  background: color-mix(
    in srgb,
    var(--background-color),
    var(--interactive-color) var(--interactive-state)
  ) !important;

  &:hover {
    --interactive-state: var(--hover);
  }

  &:active {
    --interactive-state: var(--active);
  }
}

.interactive-foreground,
a,
svg {
  text-decoration: none;
  transition: color 100ms linear;
  color: color-mix(
    in srgb,
    var(--foreground-color),
    var(--interactive-color) var(--interactive-state)
  ) !important;

  svg {
    color: currentcolor;
    fill: color-mix(
      in srgb,
      var(--foreground-color),
      var(--interactive-color) var(--interactive-state)
    ) !important;
  }

  &:hover {
    --interactive-state: var(--hover);
  }

  &:active {
    --interactive-state: var(--active);
  }
}


/* Chips */
.token,
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-x4) var(--spacing-x12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  --background-color: var(--background-muted);
  color: var(--foreground-default);
}

.chip,
.hex {
  color: var(--foreground-muted);
}

.chip {
  border: 1px dashed var(--border-subtle);
  --background-color: transparent;
}